<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/rendering.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:56 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=xhtml.html>← 14 The XML syntax</a> — <a href=index.html>Table of Contents</a> — <a href=obsolete.html>16 Obsolete features →</a></nav><ol class=toc><li id=toc-rendering><a href=rendering.html#rendering><span class=secno>15</span> Rendering</a><ol><li><a href=rendering.html#introduction-16><span class=secno>15.1</span> Introduction</a><li><a href=rendering.html#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>15.2</span> The CSS user agent style sheet and presentational hints</a><li><a href=rendering.html#non-replaced-elements><span class=secno>15.3</span> Non-replaced elements</a><ol><li><a href=rendering.html#hidden-elements><span class=secno>15.3.1</span> Hidden elements</a><li><a href=rendering.html#the-page><span class=secno>15.3.2</span> The page</a><li><a href=rendering.html#flow-content-3><span class=secno>15.3.3</span> Flow content</a><li><a href=rendering.html#phrasing-content-3><span class=secno>15.3.4</span> Phrasing content</a><li><a href=rendering.html#bidi-rendering><span class=secno>15.3.5</span> Bidirectional text</a><li><a href=rendering.html#sections-and-headings><span class=secno>15.3.6</span> Sections and headings</a><li><a href=rendering.html#lists><span class=secno>15.3.7</span> Lists</a><li><a href=rendering.html#tables-2><span class=secno>15.3.8</span> Tables</a><li><a href=rendering.html#margin-collapsing-quirks><span class=secno>15.3.9</span> Margin collapsing quirks</a><li><a href=rendering.html#form-controls><span class=secno>15.3.10</span> Form controls</a><li><a href=rendering.html#the-hr-element-2><span class=secno>15.3.11</span> The <code>hr</code> element</a><li><a href=rendering.html#the-fieldset-and-legend-elements><span class=secno>15.3.12</span> The <code>fieldset</code> and <code>legend</code> elements</a></ol><li><a href=rendering.html#replaced-elements><span class=secno>15.4</span> Replaced elements</a><ol><li><a href=rendering.html#embedded-content-rendering-rules><span class=secno>15.4.1</span> Embedded content</a><li><a href=rendering.html#images-3><span class=secno>15.4.2</span> Images</a><li><a href=rendering.html#attributes-for-embedded-content-and-images><span class=secno>15.4.3</span> Attributes for embedded content and images</a><li><a href=rendering.html#image-maps-2><span class=secno>15.4.4</span> Image maps</a></ol><li><a href=rendering.html#widgets><span class=secno>15.5</span> Widgets</a><ol><li><a href=rendering.html#native-appearance-2><span class=secno>15.5.1</span> Native appearance</a><li><a href=rendering.html#writing-mode><span class=secno>15.5.2</span> Writing mode</a><li><a href=rendering.html#button-layout><span class=secno>15.5.3</span> Button layout</a><li><a href=rendering.html#the-button-element-2><span class=secno>15.5.4</span> The <code>button</code> element</a><li><a href=rendering.html#the-details-and-summary-elements><span class=secno>15.5.5</span> The <code>details</code> and <code>summary</code> elements</a><li><a href=rendering.html#the-input-element-as-a-text-entry-widget><span class=secno>15.5.6</span> The <code>input</code> element as a text entry widget</a><li><a href=rendering.html#the-input-element-as-domain-specific-widgets><span class=secno>15.5.7</span> The <code>input</code> element as domain-specific widgets</a><li><a href=rendering.html#the-input-element-as-a-range-control><span class=secno>15.5.8</span> The <code>input</code> element as a range control</a><li><a href=rendering.html#the-input-element-as-a-colour-well><span class=secno>15.5.9</span> The <code>input</code> element as a color
  well</a><li><a href=rendering.html#the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>15.5.10</span> The <code>input</code> element as a checkbox and radio button widgets</a><li><a href=rendering.html#the-input-element-as-a-file-upload-control><span class=secno>15.5.11</span> The <code>input</code> element as a file upload control</a><li><a href=rendering.html#the-input-element-as-a-button><span class=secno>15.5.12</span> The <code>input</code> element as a button</a><li><a href=rendering.html#the-marquee-element-2><span class=secno>15.5.13</span> The <code>marquee</code> element</a><li><a href=rendering.html#the-meter-element-2><span class=secno>15.5.14</span> The <code>meter</code> element</a><li><a href=rendering.html#the-progress-element-2><span class=secno>15.5.15</span> The <code>progress</code> element</a><li><a href=rendering.html#the-select-element-2><span class=secno>15.5.16</span> The <code>select</code> element</a><li><a href=rendering.html#the-textarea-element-2><span class=secno>15.5.17</span> The <code>textarea</code> element</a></ol><li><a href=rendering.html#frames-and-framesets><span class=secno>15.6</span> Frames and framesets</a><li><a href=rendering.html#interactive-media><span class=secno>15.7</span> Interactive media</a><ol><li><a href=rendering.html#links,-forms,-and-navigation><span class=secno>15.7.1</span> Links, forms, and navigation</a><li><a href=rendering.html#the-title-attribute-2><span class=secno>15.7.2</span> The <code>title</code> attribute</a><li><a href=rendering.html#editing-hosts><span class=secno>15.7.3</span> Editing hosts</a><li><a href=rendering.html#text-rendered-in-native-user-interfaces><span class=secno>15.7.4</span> Text rendered in native user interfaces</a></ol><li><a href=rendering.html#print-media><span class=secno>15.8</span> Print media</a><li><a href=rendering.html#unstyled-xml-documents><span class=secno>15.9</span> Unstyled XML documents</a></ol></ol><h2 id=rendering><span class=secno>15</span> Rendering<a href=#rendering class=self-link></a></h2>

  <p><i>User agents are not required to present HTML documents in any particular way. However, this
  section provides a set of suggestions for rendering HTML documents that, if followed, are likely
  to lead to a user experience that closely resembles the experience intended by the documents'
  authors. So as to avoid confusion regarding the normativity of this section, "must" has not been
  used. Instead, the term "expected" is used to indicate behavior that will lead to this experience.
  For the purposes of conformance for user agents designated as <a href=infrastructure.html#renderingUA>supporting
  the suggested default rendering</a>, the term "expected" in this section has the same conformance
  implications as "must".</i></p>


  <h3 id=introduction-16><span class=secno>15.1</span> Introduction<a href=#introduction-16 class=self-link></a></h3>

  <p>The suggestions in this section are generally expressed in CSS terms. User agents are expected
  to either support CSS, or translate from the CSS rules given in this section to approximations for
  other presentation mechanisms.</p>

  <p>In the absence of style-layer rules to the contrary (e.g. author style sheets), user agents are
  expected to render an element so that it conveys to the user the meaning that the element
  <a id=introduction-16:represents href=dom.html#represents>represents</a>, as described by this specification.</p>

  <p>The suggestions in this section generally assume a visual output medium with a resolution of
  96dpi or greater, but HTML is intended to apply to multiple media (it is a
  <i>media-independent</i> language). User agent implementers are encouraged to adapt the
  suggestions in this section to their target media.</p>

  <hr>

  <p>An element is <dfn id=being-rendered data-export="">being rendered</dfn> if it has any associated CSS layout boxes, SVG
  layout boxes, or some equivalent in other styling languages.</p>

  <p class=note>Just being off-screen does not mean the element is not <a href=#being-rendered id=introduction-16:being-rendered>being
  rendered</a>. The presence of the <code id=introduction-16:attr-hidden><a href=interaction.html#attr-hidden>hidden</a></code> attribute normally
  means the element is not <a href=#being-rendered id=introduction-16:being-rendered-2>being rendered</a>, though this might be overridden by the style
  sheets.</p>

  <p class=note>The <a id=introduction-16:fully-active href=document-sequences.html#fully-active>fully active</a> state does not affect whether an element is
  <a href=#being-rendered id=introduction-16:being-rendered-3>being rendered</a> or not. Even if a document is not <a id=introduction-16:fully-active-2 href=document-sequences.html#fully-active>fully active</a> and not
  shown at all to the user, elements within it can still qualify as "being rendered".</p>

  <p>An element is said to <dfn id=intersect-the-viewport>intersect the viewport</dfn> when it is <a href=#being-rendered id=introduction-16:being-rendered-4>being rendered</a>
  and its associated CSS layout box intersects the <a id=introduction-16:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>.</p>

  <p class=note>Similar to the <a href=#being-rendered id=introduction-16:being-rendered-5>being rendered</a> state, elements in non-<a id=introduction-16:fully-active-3 href=document-sequences.html#fully-active>fully
  active</a> documents can still <a href=#intersect-the-viewport id=introduction-16:intersect-the-viewport>intersect the viewport</a>. The <a id=introduction-16:viewport-2 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>
  is not shared between documents and might not always be shown to the user, so an element in a
  non-<a id=introduction-16:fully-active-4 href=document-sequences.html#fully-active>fully active</a> document can still intersect the <a id=introduction-16:viewport-3 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> associated
  with its document.</p>

  <p class=note>This specification does not define the precise timing for when the intersection is
  tested, but it is suggested that the timing match that of the Intersection Observer API. <a href=references.html#refsINTERSECTIONOBSERVER>[INTERSECTIONOBSERVER]</a></p>

  <p>An element is <dfn id=delegating-its-rendering-to-its-children>delegating its rendering to its children</dfn> if it is not <a href=#being-rendered id=introduction-16:being-rendered-6>being
  rendered</a> but its children (if any) could <a href=#being-rendered id=introduction-16:being-rendered-7>be rendered</a>,
  as a result of CSS 'display: contents', or some equivalent in other styling languages.
  <a href=references.html#refsCSSDISPLAY>[CSSDISPLAY]</a></p>

  <hr>

  <p>User agents that do not honor author-level CSS style sheets are nonetheless expected to act as
  if they applied the CSS rules given in these sections in a manner consistent with this
  specification and the relevant CSS and Unicode specifications. <a href=references.html#refsCSS>[CSS]</a> <a href=references.html#refsUNICODE>[UNICODE]</a>
  <a href=references.html#refsBIDI>[BIDI]</a></p>

  <p class=note>This is especially important for issues relating to the <a id="introduction-16:'display'" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a>,
  <a id="introduction-16:'unicode-bidi'" href=https://drafts.csswg.org/css-writing-modes/#unicode-bidi data-x-internal="'unicode-bidi'">'unicode-bidi'</a>, and <a id="introduction-16:'direction'" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a> properties.</p>



  <h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>15.2</span> The CSS user agent style sheet and presentational hints<a href=#the-css-user-agent-style-sheet-and-presentational-hints class=self-link></a></h3>

  <p>The CSS rules given in these subsections are, except where otherwise specified, expected to be
  used as part of the user-agent level style sheet defaults for all documents that contain
  <a id=the-css-user-agent-style-sheet-and-presentational-hints:html-elements href=infrastructure.html#html-elements>HTML elements</a>.</p>

  <p>Some rules are intended for the author-level zero-specificity presentational hints part of the
  CSS cascade; these are explicitly called out as <dfn id=presentational-hints data-lt="presentational hint" data-export="">presentational hints</dfn>.</p>

  <hr>

  <p>When the text below says that an attribute <var>attribute</var> on an element
  <var>element</var> <dfn id=maps-to-the-pixel-length-property>maps to the pixel length property</dfn> (or properties)
  <var>properties</var>, it means that if <var>element</var> has an attribute <var>attribute</var>
  set, and parsing that attribute's value using the <a id=the-css-user-agent-style-sheet-and-presentational-hints:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative
  integers</a> doesn't generate an error, then the user agent is expected to use the parsed value
  as a pixel length for a <a href=#presentational-hints id=the-css-user-agent-style-sheet-and-presentational-hints:presentational-hints>presentational hint</a> for
  <var>properties</var>.</p>

  <p>When the text below says that an attribute <var>attribute</var> on an element
  <var>element</var> <dfn id=maps-to-the-dimension-property>maps to the dimension property</dfn> (or properties)
  <var>properties</var>, it means that if <var>element</var> has an attribute <var>attribute</var>
  set, and parsing that attribute's value using the <a id=the-css-user-agent-style-sheet-and-presentational-hints:rules-for-parsing-dimension-values href=common-microsyntaxes.html#rules-for-parsing-dimension-values>rules for parsing dimension values</a>
  doesn't generate an error, then the user agent is expected to use the parsed dimension as the
  value for a <a href=#presentational-hints id=the-css-user-agent-style-sheet-and-presentational-hints:presentational-hints-2>presentational hint</a> for
  <var>properties</var>, with the value given as a pixel length if the dimension was a length, and
  with the value given as a percentage if the dimension was a percentage.</p>

  <p>When the text below says that an attribute <var>attribute</var> on an element
  <var>element</var> <dfn id=maps-to-the-dimension-property-(ignoring-zero)>maps to the dimension property (ignoring zero)</dfn> (or properties)
  <var>properties</var>, it means that if <var>element</var> has an attribute <var>attribute</var>
  set, and parsing that attribute's value using the <a id=the-css-user-agent-style-sheet-and-presentational-hints:rules-for-parsing-non-zero-dimension-values href=common-microsyntaxes.html#rules-for-parsing-non-zero-dimension-values>rules for parsing nonzero dimension
  values</a> doesn't generate an error, then the user agent is expected to use the parsed
  dimension as the value for a <a href=#presentational-hints id=the-css-user-agent-style-sheet-and-presentational-hints:presentational-hints-3>presentational hint</a> for
  <var>properties</var>, with the value given as a pixel length if the dimension was a length, and
  with the value given as a percentage if the dimension was a percentage.</p>

  <p>When the text below says that a pair of attributes <var>w</var> and <var>h</var> on an
  element <var>element</var> <dfn id=map-to-the-aspect-ratio-property>map to the aspect-ratio property</dfn>, it means that if
  <var>element</var> has both attributes <var>w</var> and <var>h</var>, and parsing those
  attributes' values using the <a id=the-css-user-agent-style-sheet-and-presentational-hints:rules-for-parsing-non-negative-integers-2 href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> doesn't
  generate an error for either, then the user agent is expected to use the parsed integers as a
  <a href=#presentational-hints id=the-css-user-agent-style-sheet-and-presentational-hints:presentational-hints-4>presentational hint</a> for the <a id="the-css-user-agent-style-sheet-and-presentational-hints:'aspect-ratio'" href=https://drafts.csswg.org/css-sizing-4/#aspect-ratio data-x-internal="'aspect-ratio'">'aspect-ratio'</a>
  property of the form <code>auto <var>w</var> / <var>h</var></code>.</p>

  <p>When the text below says that a pair of attributes <var>w</var> and <var>h</var> on an
  element <var>element</var> <dfn id=map-to-the-aspect-ratio-property-(using-dimension-rules)>map to the aspect-ratio property (using dimension rules)</dfn>, it
  means that if <var>element</var> has both attributes <var>w</var> and <var>h</var>, and parsing
  those attributes' values using the <a id=the-css-user-agent-style-sheet-and-presentational-hints:rules-for-parsing-dimension-values-2 href=common-microsyntaxes.html#rules-for-parsing-dimension-values>rules for parsing dimension values</a> doesn't
  generate an error or return a percentage for either, then the user agent is expected to use the
  parsed dimensions as a <a href=#presentational-hints id=the-css-user-agent-style-sheet-and-presentational-hints:presentational-hints-5>presentational hint</a> for the
  <a id="the-css-user-agent-style-sheet-and-presentational-hints:'aspect-ratio'-2" href=https://drafts.csswg.org/css-sizing-4/#aspect-ratio data-x-internal="'aspect-ratio'">'aspect-ratio'</a> property of the form <code>auto
  <var>w</var> / <var>h</var></code>.</p>

  <p>When a user agent is to <dfn id=align-descendants>align descendants</dfn> of a node, the user agent is expected to
  align only those descendants that have both their <a id="the-css-user-agent-style-sheet-and-presentational-hints:'margin-inline-start'" href=https://drafts.csswg.org/css-logical/#propdef-margin-inline-start data-x-internal="'margin-inline-start'">'margin-inline-start'</a> and
  <a id="the-css-user-agent-style-sheet-and-presentational-hints:'margin-inline-end'" href=https://drafts.csswg.org/css-logical/#propdef-margin-inline-end data-x-internal="'margin-inline-end'">'margin-inline-end'</a> properties computing to a value other than 'auto', that are
  over-constrained and that have one of those two margins with a <a id=the-css-user-agent-style-sheet-and-presentational-hints:used-value href=https://drafts.csswg.org/css-cascade/#used-value data-x-internal=used-value>used value</a> forced to a
  greater value, and that do not themselves have an applicable <code>align</code>
  attribute. When multiple elements are to <a href=#align-descendants id=the-css-user-agent-style-sheet-and-presentational-hints:align-descendants>align</a> a
  particular descendant, the most deeply nested such element is expected to override the others.
  Aligned elements are expected to be aligned by having the <a href=https://drafts.csswg.org/css-cascade/#used-value id=the-css-user-agent-style-sheet-and-presentational-hints:used-value-2 data-x-internal=used-value>used
  values</a> of their margins on the <a id=the-css-user-agent-style-sheet-and-presentational-hints:line-left href=https://drafts.csswg.org/css-writing-modes/#line-left data-x-internal=line-left>line-left</a> and <a id=the-css-user-agent-style-sheet-and-presentational-hints:line-right href=https://drafts.csswg.org/css-writing-modes/#line-right data-x-internal=line-right>line-right</a> sides be
  set accordingly. <a href=references.html#refsCSSLOGICAL>[CSSLOGICAL]</a> <a href=references.html#refsCSSWM>[CSSWM]</a></p>



  <h3 id=non-replaced-elements><span class=secno>15.3</span> Non-replaced elements<a href=#non-replaced-elements class=self-link></a></h3>


  <h4 id=hidden-elements><span class=secno>15.3.1</span> Hidden elements<a href=#hidden-elements class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>area, base, basefont, datalist, head, link, meta, noembed,</c->
<c- f>noframes, param, rp, script, style, template, title </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> none<c- p>;</c->
<c- p>}</c->

<span id='hiddenCSS'><c- f>[hidden]:not([hidden=until-found i]):not(embed)</c-></span><c- f> </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> none<c- p>;</c->
<c- p>}</c->

<c- f>[hidden=until-found i]:not(embed) </c-><c- p>{</c->
  <c- k>content-visibility</c-><c- p>:</c-> hidden<c- p>;</c->
<c- p>}</c->

<c- f>embed[hidden] </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> inline<c- p>;</c-> <c- k>height</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> 

<c- f>input[type=hidden i] </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> none !important; }

@media (scripting) {
  noscript { display: none !important; }
}</code></pre>


  <h4 id=the-page><span class=secno>15.3.2</span> The page<a href=#the-page class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>html, body </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- p>}</c-></code></pre>


  

  <p>For each property in the table below, given a <code id=the-page:the-body-element><a href=sections.html#the-body-element>body</a></code> element, the first attribute
  that exists <a href=#maps-to-the-pixel-length-property id=the-page:maps-to-the-pixel-length-property>maps to the pixel length property</a> on the <code id=the-page:the-body-element-2><a href=sections.html#the-body-element>body</a></code> element. If
  none of the attributes for a property are found, or if the value of the attribute that was found
  cannot be parsed successfully, then a default value of 8px is expected to be used for that
  property instead.</p>

  <table><thead><tr><th>Property
     <th>Source
   <tbody><tr><td rowspan=3><a id="the-page:'margin-top'" href=https://drafts.csswg.org/css-box/#propdef-margin-top data-x-internal="'margin-top'">'margin-top'</a>
     <td>The <code id=the-page:the-body-element-3><a href=sections.html#the-body-element>body</a></code> element's <code id=the-page:attr-body-marginheight><a href=obsolete.html#attr-body-marginheight>marginheight</a></code> attribute
    <tr><td>The <code id=the-page:the-body-element-4><a href=sections.html#the-body-element>body</a></code> element's <code id=the-page:attr-body-topmargin><a href=obsolete.html#attr-body-topmargin>topmargin</a></code> attribute
    <tr><td>The <code id=the-page:the-body-element-5><a href=sections.html#the-body-element>body</a></code> element's <a href=#container-frame-element id=the-page:container-frame-element>container frame element</a>'s <code id=the-page:attr-iframe-marginheight><a href=obsolete.html#attr-iframe-marginheight>marginheight</a></code> attribute
   <tbody><tr><td rowspan=3><a id="the-page:'margin-right'" href=https://drafts.csswg.org/css-box/#propdef-margin-right data-x-internal="'margin-right'">'margin-right'</a>
     <td>The <code id=the-page:the-body-element-6><a href=sections.html#the-body-element>body</a></code> element's <code id=the-page:attr-body-marginwidth><a href=obsolete.html#attr-body-marginwidth>marginwidth</a></code> attribute
    <tr><td>The <code id=the-page:the-body-element-7><a href=sections.html#the-body-element>body</a></code> element's <code id=the-page:attr-body-rightmargin><a href=obsolete.html#attr-body-rightmargin>rightmargin</a></code> attribute
    <tr><td>The <code id=the-page:the-body-element-8><a href=sections.html#the-body-element>body</a></code> element's <a href=#container-frame-element id=the-page:container-frame-element-2>container frame element</a>'s <code id=the-page:attr-iframe-marginwidth><a href=obsolete.html#attr-iframe-marginwidth>marginwidth</a></code> attribute
   <tbody><tr><td rowspan=3><a id="the-page:'margin-bottom'" href=https://drafts.csswg.org/css-box/#propdef-margin-bottom data-x-internal="'margin-bottom'">'margin-bottom'</a>
     <td>The <code id=the-page:the-body-element-9><a href=sections.html#the-body-element>body</a></code> element's <code id=the-page:attr-body-marginheight-2><a href=obsolete.html#attr-body-marginheight>marginheight</a></code> attribute
    <tr><td>The <code id=the-page:the-body-element-10><a href=sections.html#the-body-element>body</a></code> element's <code id=the-page:attr-body-bottommargin><a href=obsolete.html#attr-body-bottommargin>bottommargin</a></code> attribute
    <tr><td>The <code id=the-page:the-body-element-11><a href=sections.html#the-body-element>body</a></code> element's <a href=#container-frame-element id=the-page:container-frame-element-3>container frame element</a>'s <code id=the-page:attr-iframe-marginheight-2><a href=obsolete.html#attr-iframe-marginheight>marginheight</a></code> attribute
   <tbody><tr><td rowspan=3><a id="the-page:'margin-left'" href=https://drafts.csswg.org/css-box/#propdef-margin-left data-x-internal="'margin-left'">'margin-left'</a>
     <td>The <code id=the-page:the-body-element-12><a href=sections.html#the-body-element>body</a></code> element's <code id=the-page:attr-body-marginwidth-2><a href=obsolete.html#attr-body-marginwidth>marginwidth</a></code> attribute
    <tr><td>The <code id=the-page:the-body-element-13><a href=sections.html#the-body-element>body</a></code> element's <code id=the-page:attr-body-leftmargin><a href=obsolete.html#attr-body-leftmargin>leftmargin</a></code> attribute
    <tr><td>The <code id=the-page:the-body-element-14><a href=sections.html#the-body-element>body</a></code> element's <a href=#container-frame-element id=the-page:container-frame-element-4>container frame element</a>'s <code id=the-page:attr-iframe-marginwidth-2><a href=obsolete.html#attr-iframe-marginwidth>marginwidth</a></code> attribute
  </table>

  <p>If the <code id=the-page:the-body-element-15><a href=sections.html#the-body-element>body</a></code> element's <a id=the-page:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=the-page:node-navigable href=document-sequences.html#node-navigable>node navigable</a> is
  a <a id=the-page:child-navigable href=document-sequences.html#child-navigable>child navigable</a>, and the <a href=document-sequences.html#nav-container id=the-page:nav-container>container</a> of that
  <a id=the-page:navigable href=document-sequences.html#navigable>navigable</a> is a <code id=the-page:frame><a href=obsolete.html#frame>frame</a></code> or <code id=the-page:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element, then the
  <dfn id=container-frame-element>container frame element</dfn> of the <code id=the-page:the-body-element-16><a href=sections.html#the-body-element>body</a></code> element is that <code id=the-page:frame-2><a href=obsolete.html#frame>frame</a></code> or
  <code id=the-page:the-iframe-element-2><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element. Otherwise, there is no <a href=#container-frame-element id=the-page:container-frame-element-5>container frame element</a>.</p>

  <p class=warning>The above requirements imply that a page can change the margins of another page
  (including one from another <a id=the-page:concept-origin href=browsers.html#concept-origin>origin</a>) using, for example, an <code id=the-page:the-iframe-element-3><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>. This
  is potentially a security risk, as it might in some cases allow an attack to contrive a situation
  in which a page is rendered not as the author intended, possibly for the purposes of phishing or
  otherwise misleading the user.</p>

  <hr>

  <p>If a <code id=the-page:document><a href=dom.html#document>Document</a></code>'s <a id=the-page:node-navigable-2 href=document-sequences.html#node-navigable>node navigable</a> is a <a id=the-page:child-navigable-2 href=document-sequences.html#child-navigable>child navigable</a>,
  then it is expected to be positioned and sized to fit inside the <a id=the-page:content-box href=https://drafts.csswg.org/css-box/#content-box data-x-internal=content-box>content box</a> of the
  <a href=document-sequences.html#nav-container id=the-page:nav-container-2>container</a> of that <a id=the-page:navigable-2 href=document-sequences.html#navigable>navigable</a>. If the <a href=document-sequences.html#nav-container id=the-page:nav-container-3>container</a> is not <a href=#being-rendered id=the-page:being-rendered>being rendered</a>, the
  <a id=the-page:navigable-3 href=document-sequences.html#navigable>navigable</a> is expected to have a <a id=the-page:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> with zero width and zero
  height.</p>

  <p>If a <code id=the-page:document-2><a href=dom.html#document>Document</a></code>'s <a id=the-page:node-navigable-3 href=document-sequences.html#node-navigable>node navigable</a> is a <a id=the-page:child-navigable-3 href=document-sequences.html#child-navigable>child navigable</a>,
  the <a href=document-sequences.html#nav-container id=the-page:nav-container-4>container</a> of that <a id=the-page:navigable-4 href=document-sequences.html#navigable>navigable</a> is a
  <code id=the-page:frame-3><a href=obsolete.html#frame>frame</a></code> or <code id=the-page:the-iframe-element-4><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element, that element has a <code>scrolling</code> attribute, and that attribute's value is an <a id=the-page:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> match for the string "<code>off</code>", "<code>noscroll</code>", or "<code>no</code>", then the user agent is expected to
  prevent any scrollbars from being shown for the <a id=the-page:viewport-2 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> of the
  <code id=the-page:document-3><a href=dom.html#document>Document</a></code>'s <a id=the-page:node-navigable-4 href=document-sequences.html#node-navigable>node navigable</a>, regardless of the <a id="the-page:'overflow'" href=https://drafts.csswg.org/css-overflow/#propdef-overflow data-x-internal="'overflow'">'overflow'</a>
  property that applies to that <a id=the-page:viewport-3 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>.</p>

  <hr>

  <p>When a <code id=the-page:the-body-element-17><a href=sections.html#the-body-element>body</a></code> element has a <code id=the-page:attr-background><a href=obsolete.html#attr-background>background</a></code>
  attribute set to a non-empty value, the new value is expected to be <a href=urls-and-fetching.html#encoding-parsing-and-serializing-a-url id=the-page:encoding-parsing-and-serializing-a-url>encoding-parsed-and-serialized</a> relative to
  the element's <a id=the-page:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, and if that does not return failure, the user agent is
  expected to treat the attribute as a <a href=#presentational-hints id=the-page:presentational-hints>presentational
  hint</a> setting the element's <a id="the-page:'background-image'" href=https://drafts.csswg.org/css-backgrounds/#propdef-background-image data-x-internal="'background-image'">'background-image'</a> property to the return
  value.</p>

  <p>When a <code id=the-page:the-body-element-18><a href=sections.html#the-body-element>body</a></code> element has a <code id=the-page:attr-body-bgcolor><a href=obsolete.html#attr-body-bgcolor>bgcolor</a></code>
  attribute set, the new value is expected to be parsed using the <a id=the-page:rules-for-parsing-a-legacy-colour-value href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy
  color value</a>, and if that does not return failure, the user agent is expected to treat the
  attribute as a <a href=#presentational-hints id=the-page:presentational-hints-2>presentational hint</a> setting the
  element's <a id="the-page:'background-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-background-color data-x-internal="'background-color'">'background-color'</a> property to the resulting color.</p>

  <p>When a <code id=the-page:the-body-element-19><a href=sections.html#the-body-element>body</a></code> element has a <code id=the-page:attr-body-text><a href=obsolete.html#attr-body-text>text</a></code> attribute, its
  value is expected to be parsed using the <a id=the-page:rules-for-parsing-a-legacy-colour-value-2 href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy color value</a>, and
  if that does not return failure, the user agent is expected to treat the attribute as a <a href=#presentational-hints id=the-page:presentational-hints-3>presentational hint</a> setting the element's
  <a id="the-page:'color'" href=https://drafts.csswg.org/css-color/#the-color-property data-x-internal="'color'">'color'</a> property to the resulting color.</p>

  <p>When a <code id=the-page:the-body-element-20><a href=sections.html#the-body-element>body</a></code> element has a <code id=the-page:attr-body-link><a href=obsolete.html#attr-body-link>link</a></code> attribute, its
  value is expected to be parsed using the <a id=the-page:rules-for-parsing-a-legacy-colour-value-3 href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy color value</a>, and
  if that does not return failure, the user agent is expected to treat the attribute as a <a href=#presentational-hints id=the-page:presentational-hints-4>presentational hint</a> setting the <a id="the-page:'color'-2" href=https://drafts.csswg.org/css-color/#the-color-property data-x-internal="'color'">'color'</a> property
  of any element in the <code id=the-page:document-4><a href=dom.html#document>Document</a></code> matching the <code id=the-page:selector-link><a href=semantics-other.html#selector-link>:link</a></code>
  <a id=the-page:pseudo-class href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> to the resulting color.</p>

  <p>When a <code id=the-page:the-body-element-21><a href=sections.html#the-body-element>body</a></code> element has a <code id=the-page:attr-body-vlink><a href=obsolete.html#attr-body-vlink>vlink</a></code> attribute,
  its value is expected to be parsed using the <a id=the-page:rules-for-parsing-a-legacy-colour-value-4 href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy color value</a>,
  and if that does not return failure, the user agent is expected to treat the attribute as a <a href=#presentational-hints id=the-page:presentational-hints-5>presentational hint</a> setting the <a id="the-page:'color'-3" href=https://drafts.csswg.org/css-color/#the-color-property data-x-internal="'color'">'color'</a> property
  of any element in the <code id=the-page:document-5><a href=dom.html#document>Document</a></code> matching the <code id=the-page:selector-visited><a href=semantics-other.html#selector-visited>:visited</a></code> <a id=the-page:pseudo-class-2 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> to the resulting color.</p>

  <p>When a <code id=the-page:the-body-element-22><a href=sections.html#the-body-element>body</a></code> element has an <code id=the-page:attr-body-alink><a href=obsolete.html#attr-body-alink>alink</a></code> attribute,
  its value is expected to be parsed using the <a id=the-page:rules-for-parsing-a-legacy-colour-value-5 href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy color value</a>,
  and if that does not return failure, the user agent is expected to treat the attribute as a <a href=#presentational-hints id=the-page:presentational-hints-6>presentational hint</a> setting the <a id="the-page:'color'-4" href=https://drafts.csswg.org/css-color/#the-color-property data-x-internal="'color'">'color'</a> property
  of any element in the <code id=the-page:document-6><a href=dom.html#document>Document</a></code> matching the
  <code id=the-page:selector-active><a href=semantics-other.html#selector-active>:active</a></code> <a id=the-page:pseudo-class-3 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> and either the <code id=the-page:selector-link-2><a href=semantics-other.html#selector-link>:link</a></code> <a id=the-page:pseudo-class-4 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> or the <code id=the-page:selector-visited-2><a href=semantics-other.html#selector-visited>:visited</a></code> <a id=the-page:pseudo-class-5 href=https://drafts.csswg.org/selectors/#pseudo-class data-x-internal=pseudo-class>pseudo-class</a> to the resulting color.</p>



  <h4 id=flow-content-3><span class=secno>15.3.3</span> Flow content<a href=#flow-content-3 class=self-link></a></h4>

  

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>address, blockquote, center, dialog, div, figure, figcaption, footer, form,</c->
<c- f>header, hr, legend, listing, main, p, plaintext, pre, search, xmp </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> block<c- p>;</c->
<c- p>}</c->

<c- f>blockquote, figure, listing, p, plaintext, pre, xmp </c-><c- p>{</c->
  <c- k>margin-block</c-><c- p>:</c-> <c- m>1</c-><c- l>em</c-><c- p>;</c->
<c- p>}</c->

<c- f>blockquote, figure </c-><c- p>{</c-> <c- k>margin-inline</c-><c- p>:</c-> <c- m>40</c-><c- l>px</c-><c- p>;</c-> <c- p>}</c->

<c- f>address </c-><c- p>{</c-> <c- k>font-style</c-><c- p>:</c-> italic<c- p>;</c-> <c- p>}</c->
<c- f>listing, plaintext, pre, xmp </c-><c- p>{</c->
  <c- k>font-family</c-><c- p>:</c-> monospace<c- p>;</c-> <c- k>white-space</c-><c- p>:</c-> pre<c- p>;</c->
<c- p>}</c->

<c- f>dialog:not([open]) </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> none<c- p>;</c-> <c- p>}</c->
<c- f>dialog </c-><c- p>{</c->
  <c- k>position</c-><c- p>:</c-> absolute<c- p>;</c->
  <c- k>inset-inline-start</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- k>inset-inline-end</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
  <c- k>width</c-><c- p>:</c-> fit-content<c- p>;</c->
  <c- k>height</c-><c- p>:</c-> fit-content<c- p>;</c->
  <c- k>margin</c-><c- p>:</c-> auto<c- p>;</c->
  <c- k>border</c-><c- p>:</c-> solid<c- p>;</c->
  <c- k>padding</c-><c- p>:</c-> <c- m>1</c-><c- l>em</c-><c- p>;</c->
  <c- k>background-color</c-><c- p>:</c-> Canvas<c- p>;</c->
  <c- k>color</c-><c- p>:</c-> CanvasText<c- p>;</c->
<c- p>}</c->
<c- f>dialog:modal </c-><c- p>{</c->
  <c- k>position</c-><c- p>:</c-> fixed<c- p>;</c->
  <c- k>overflow</c-><c- p>:</c-> auto<c- p>;</c->
  <c- k>inset-block</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
  <c- k>max-width</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- l>%</c-> - <c- m>6</c-><c- l>px</c-> - <c- m>2</c-><c- l>em</c-><c- p>);</c->
  <c- k>max-height</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- l>%</c-> - <c- m>6</c-><c- l>px</c-> - <c- m>2</c-><c- l>em</c-><c- p>);</c->
<c- p>}</c->
<c- f>dialog::backdrop </c-><c- p>{</c->
  <c- k>background</c-><c- p>:</c-> <c- nf>rgba</c-><c- p>(</c-><c- m>0</c-><c- p>,</c-><c- m>0</c-><c- p>,</c-><c- m>0</c-><c- p>,</c-><c- m>0.1</c-><c- p>);</c->
<c- p>}</c->

<c- f>[popover]:not(:popover-open):not(dialog[open]) </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c->none<c- p>;</c->
<c- p>}</c->

<c- f>dialog:popover-open </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c->block<c- p>;</c->
<c- p>}</c->

<c- f>[popover] </c-><c- p>{</c->
  <c- k>position</c-><c- p>:</c-> fixed<c- p>;</c->
  <c- k>inset</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
  <c- k>width</c-><c- p>:</c-> fit-content<c- p>;</c->
  <c- k>height</c-><c- p>:</c-> fit-content<c- p>;</c->
  <c- k>margin</c-><c- p>:</c-> auto<c- p>;</c->
  <c- k>border</c-><c- p>:</c-> solid<c- p>;</c->
  <c- k>padding</c-><c- p>:</c-> <c- m>0.25</c-><c- l>em</c-><c- p>;</c->
  <c- k>overflow</c-><c- p>:</c-> auto<c- p>;</c->
  <c- k>color</c-><c- p>:</c-> CanvasText<c- p>;</c->
  <c- k>background-color</c-><c- p>:</c-> Canvas<c- p>;</c->
<c- p>}</c->

<c- f>:popover-open::backdrop </c-><c- p>{</c->
  <c- k>position</c-><c- p>:</c-> fixed<c- p>;</c->
  <c- k>inset</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
  <c- k>pointer-events</c-><c- p>:</c-> none !important;
  background-color: transparent;
}

slot {
  display: contents;
}</code></pre>

  <p>The following rules are also expected to apply, as <a href=#presentational-hints id=flow-content-3:presentational-hints>presentational hints</a>:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>pre[wrap] </c-><c- p>{</c-> <c- k>white-space</c-><c- p>:</c-> pre-wrap<c- p>;</c-> <c- p>}</c-></code></pre>

  <p>In <a id=flow-content-3:quirks-mode href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, the following rules are also expected to apply:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>form </c-><c- p>{</c-> <c- k>margin-block-end</c-><c- p>:</c-> <c- m>1</c-><c- l>em</c-><c- p>;</c-> <c- p>}</c-></code></pre>

  <hr>

  <p>The <code id=flow-content-3:center><a href=obsolete.html#center>center</a></code> element, and the <code id=flow-content-3:the-div-element><a href=grouping-content.html#the-div-element>div</a></code> element when it has an <code id=flow-content-3:attr-div-align><a href=obsolete.html#attr-div-align>align</a></code> attribute whose value is an <a id=flow-content-3:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> match for either the string "<code>center</code>" or the string
  "<code>middle</code>", are expected to center text within themselves, as if they had
  their <a id="flow-content-3:'text-align'" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property set to 'center' in a <a href=#presentational-hints id=flow-content-3:presentational-hints-2>presentational hint</a>, and to <a href=#align-descendants id=flow-content-3:align-descendants>align descendants</a> to the center.</p>

  <p>The <code id=flow-content-3:the-div-element-2><a href=grouping-content.html#the-div-element>div</a></code> element, when it has an <code id=flow-content-3:attr-div-align-2><a href=obsolete.html#attr-div-align>align</a></code>
  attribute whose value is an <a id=flow-content-3:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>left</code>", is expected to left-align text within itself, as if it had its
  <a id="flow-content-3:'text-align'-2" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property set to 'left' in a <a href=#presentational-hints id=flow-content-3:presentational-hints-3>presentational hint</a>, and to <a href=#align-descendants id=flow-content-3:align-descendants-2>align descendants</a> to the left.</p>

  <p>The <code id=flow-content-3:the-div-element-3><a href=grouping-content.html#the-div-element>div</a></code> element, when it has an <code id=flow-content-3:attr-div-align-3><a href=obsolete.html#attr-div-align>align</a></code>
  attribute whose value is an <a id=flow-content-3:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>right</code>", is expected to right-align text within itself, as if it had its
  <a id="flow-content-3:'text-align'-3" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property set to 'right' in a <a href=#presentational-hints id=flow-content-3:presentational-hints-4>presentational hint</a>, and to <a href=#align-descendants id=flow-content-3:align-descendants-3>align descendants</a> to the right.</p>

  <p>The <code id=flow-content-3:the-div-element-4><a href=grouping-content.html#the-div-element>div</a></code> element, when it has an <code id=flow-content-3:attr-div-align-4><a href=obsolete.html#attr-div-align>align</a></code>
  attribute whose value is an <a id=flow-content-3:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>justify</code>", is expected to full-justify text within itself, as if it had its
  <a id="flow-content-3:'text-align'-4" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property set to 'justify' in a <a href=#presentational-hints id=flow-content-3:presentational-hints-5>presentational hint</a>, and to <a href=#align-descendants id=flow-content-3:align-descendants-4>align descendants</a> to the left.</p>

  <h4 id=phrasing-content-3><span class=secno>15.3.4</span> Phrasing content<a href=#phrasing-content-3 class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>cite, dfn, em, i, var </c-><c- p>{</c-> <c- k>font-style</c-><c- p>:</c-> italic<c- p>;</c-> <c- p>}</c->
<c- f>b, strong </c-><c- p>{</c-> <c- k>font-weight</c-><c- p>:</c-> bolder<c- p>;</c-> <c- p>}</c->
<c- f>code, kbd, samp, tt </c-><c- p>{</c-> <c- k>font-family</c-><c- p>:</c-> monospace<c- p>;</c-> <c- p>}</c->
<c- f>big </c-><c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> larger<c- p>;</c-> <c- p>}</c->
<c- f>small </c-><c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> smaller<c- p>;</c-> <c- p>}</c->

<c- f>sub </c-><c- p>{</c-> <c- k>vertical-align</c-><c- p>:</c-> sub<c- p>;</c-> <c- p>}</c->
<c- f>sup </c-><c- p>{</c-> <c- k>vertical-align</c-><c- p>:</c-> super<c- p>;</c-> <c- p>}</c->
<c- f>sub, sup </c-><c- p>{</c-> <c- k>line-height</c-><c- p>:</c-> normal<c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> smaller<c- p>;</c-> <c- p>}</c->

<c- f>ruby </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> ruby<c- p>;</c-> <c- p>}</c->
<c- f>rt </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> ruby-text<c- p>;</c-> <c- p>}</c->

<c- f>:link </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> #0000EE<c- p>;</c-> <c- p>}</c->
<c- f>:visited </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> #551A8B<c- p>;</c-> <c- p>}</c->
<c- f>:link:active, :visited:active </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> #FF0000<c- p>;</c-> <c- p>}</c->
<c- f>:link, :visited </c-><c- p>{</c-> <c- k>text-decoration</c-><c- p>:</c-> underline<c- p>;</c-> <c- k>cursor</c-><c- p>:</c-> pointer<c- p>;</c-> <c- p>}</c->

<c- f>:focus-visible </c-><c- p>{</c-> <c- k>outline</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c->

<c- f>mark </c-><c- p>{</c-> <c- k>background</c-><c- p>:</c-> yellow<c- p>;</c-> <c- k>color</c-><c- p>:</c-> black<c- p>;</c-> <c- p>}</c-> <c- c>/* this color is just a suggestion and can be changed based on implementation feedback */</c->

<c- f>abbr[title], acronym[title] </c-><c- p>{</c-> <c- k>text-decoration</c-><c- p>:</c-> dotted underline<c- p>;</c-> <c- p>}</c->
<c- f>ins, u </c-><c- p>{</c-> <c- k>text-decoration</c-><c- p>:</c-> underline<c- p>;</c-> <c- p>}</c->
<c- f>del, s, strike </c-><c- p>{</c-> <c- k>text-decoration</c-><c- p>:</c-> line-through<c- p>;</c-> <c- p>}</c->

<c- f>q::before </c-><c- p>{</c-> <c- k>content</c-><c- p>:</c-> open-quote<c- p>;</c-> <c- p>}</c->
<c- f>q::after </c-><c- p>{</c-> <c- k>content</c-><c- p>:</c-> close-quote<c- p>;</c-> <c- p>}</c->

<span id='br-wbr-content'><c- f>br </c-><c- p>{</c-> <c- k>display-outside</c-><c- p>:</c-> newline<c- p>;</c-> <c- p>}</c-> <c- c>/* </c-><a href='#bidi-rendering'><c- c>this also has bidi implications</c-></a><c- c> */</c->
<c- f>nobr </c-><c- p>{</c-> <c- k>white-space</c-><c- p>:</c-> nowrap<c- p>;</c-> <c- p>}</c->
<c- f>wbr </c-><c- p>{</c-> <c- k>display-outside</c-><c- p>:</c-> break-opportunity<c- p>;</c-> <c- p>}</c-> <c- c>/* </c-><a href='#bidi-rendering'><c- c>this also has bidi implications</c-></a><c- c> */</c->
<c- f>nobr wbr </c-><c- p>{</c-> <c- k>white-space</c-><c- p>:</c-> normal<c- p>;</c-> <c- p>}</c-></span></code></pre>

  <p>The following rules are also expected to apply, as
  <a href=#presentational-hints id=phrasing-content-3:presentational-hints>presentational hints</a>:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>br[clear=left i] </c-><c- p>{</c-> <c- k>clear</c-><c- p>:</c-> left<c- p>;</c-> <c- p>}</c->
<c- f>br[clear=right i] </c-><c- p>{</c-> <c- k>clear</c-><c- p>:</c-> right<c- p>;</c-> <c- p>}</c->
<c- f>br[clear=all i], br[clear=both i] </c-><c- p>{</c-> <c- k>clear</c-><c- p>:</c-> both<c- p>;</c-> <c- p>}</c-></code></pre>

  <p>For the purposes of the CSS ruby model, runs of children of <code id=phrasing-content-3:the-ruby-element><a href=text-level-semantics.html#the-ruby-element>ruby</a></code> elements that are
  not <code id=phrasing-content-3:the-rt-element><a href=text-level-semantics.html#the-rt-element>rt</a></code> or <code id=phrasing-content-3:the-rp-element><a href=text-level-semantics.html#the-rp-element>rp</a></code> elements are expected to be wrapped in anonymous boxes
  whose <a id="phrasing-content-3:'display'" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> property has the value <a id="phrasing-content-3:'ruby-base'" href=https://drafts.csswg.org/css-ruby/#valdef-display-ruby-base data-x-internal="'ruby-base'">'ruby-base'</a>. <a href=references.html#refsCSSRUBY>[CSSRUBY]</a></p>

  <p>When a particular part of a ruby has more than one annotation, the annotations should be
  distributed on both sides of the base text so as to minimize the stacking of ruby annotations on
  one side.</p>

  <p class=note>When it becomes possible to do so, the preceding requirement will be updated to be
  expressed in terms of CSS ruby. (Currently, CSS ruby does not handle nested <code id=phrasing-content-3:the-ruby-element-2><a href=text-level-semantics.html#the-ruby-element>ruby</a></code>
  elements or multiple sequential <code id=phrasing-content-3:the-rt-element-2><a href=text-level-semantics.html#the-rt-element>rt</a></code> elements, which is how this semantic is
  expressed.)</p>

  <p>User agents that do not support correct ruby rendering are expected to render parentheses
  around the text of <code id=phrasing-content-3:the-rt-element-3><a href=text-level-semantics.html#the-rt-element>rt</a></code> elements in the absence of <code id=phrasing-content-3:the-rp-element-2><a href=text-level-semantics.html#the-rp-element>rp</a></code> elements.</p>

  <hr>

  <p>User agents are expected to support the <a id="phrasing-content-3:'clear'" href=https://drafts.csswg.org/css2/#flow-control data-x-internal="'clear'">'clear'</a> property on inline elements (in
  order to render <code id=phrasing-content-3:the-br-element><a href=text-level-semantics.html#the-br-element>br</a></code> elements with <code id=phrasing-content-3:attr-br-clear><a href=obsolete.html#attr-br-clear>clear</a></code>
  attributes) in the manner described in the non-normative note to this effect in <cite>CSS</cite>.
  </p> 

  <p>The initial value for the <a id="phrasing-content-3:'color'" href=https://drafts.csswg.org/css-color/#the-color-property data-x-internal="'color'">'color'</a> property is expected to be black. The initial
  value for the <a id="phrasing-content-3:'background-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-background-color data-x-internal="'background-color'">'background-color'</a> property is expected to be 'transparent'. The
  canvas's background is expected to be white.</p>

  <hr>

  <p>When a <code id=phrasing-content-3:font><a href=obsolete.html#font>font</a></code> element has a <code>color</code>
  attribute, its value is expected to be parsed using the <a id=phrasing-content-3:rules-for-parsing-a-legacy-colour-value href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy color
  value</a>, and if that does not return failure, the user agent is expected to treat the
  attribute as a <a href=#presentational-hints id=phrasing-content-3:presentational-hints-2>presentational hint</a> setting the
  element's <a id="phrasing-content-3:'color'-2" href=https://drafts.csswg.org/css-color/#the-color-property data-x-internal="'color'">'color'</a> property to the resulting color.</p>

  <p>When a <code id=phrasing-content-3:font-2><a href=obsolete.html#font>font</a></code> element has a <code>face</code>
  attribute, the user agent is expected to treat the attribute as a <a href=#presentational-hints id=phrasing-content-3:presentational-hints-3>presentational hint</a> setting the element's <a id="phrasing-content-3:'font-family'" href=https://drafts.csswg.org/css-fonts/#font-family-prop data-x-internal="'font-family'">'font-family'</a> property to the
  attribute's value.</p>

  

  <p>When a <code id=phrasing-content-3:font-3><a href=obsolete.html#font>font</a></code> element has a <code>size</code>
  attribute, the user agent is expected to use the following steps, known as the <dfn id=rules-for-parsing-a-legacy-font-size>rules for
  parsing a legacy font size</dfn>, to treat the attribute as a <a href=#presentational-hints id=phrasing-content-3:presentational-hints-4>presentational hint</a> setting the element's <a id="phrasing-content-3:'font-size'" href=https://drafts.csswg.org/css-fonts/#font-size-prop data-x-internal="'font-size'">'font-size'</a> property:</p>

  <ol><li><p>Let <var>input</var> be the attribute's value.<li><p>Let <var>position</var> be a pointer into <var>input</var>, initially pointing at the
   start of the string.<li><p><a id=phrasing-content-3:skip-ascii-whitespace href=https://infra.spec.whatwg.org/#skip-ascii-whitespace data-x-internal=skip-ascii-whitespace>Skip ASCII whitespace</a> within <var>input</var> given
   <var>position</var>.<li><p>If <var>position</var> is past the end of <var>input</var>, there is no <a href=#presentational-hints id=phrasing-content-3:presentational-hints-5>presentational hint</a>. Return.<li><p>If the character at <var>position</var> is a U+002B PLUS SIGN character (+), then let
   <var>mode</var> be <i>relative-plus</i>, and advance <var>position</var> to the next character.
   Otherwise, if the character at <var>position</var> is a U+002D HYPHEN-MINUS character (-), then
   let <var>mode</var> be <i>relative-minus</i>, and advance <var>position</var> to the next
   character. Otherwise, let <var>mode</var> be <i>absolute</i>.<li><p><a id=phrasing-content-3:collect-a-sequence-of-code-points href=https://infra.spec.whatwg.org/#collect-a-sequence-of-code-points data-x-internal=collect-a-sequence-of-code-points>Collect a sequence of code points</a> that are <a id=phrasing-content-3:ascii-digits href=https://infra.spec.whatwg.org/#ascii-digit data-x-internal=ascii-digits>ASCII digits</a> from
   <var>input</var> given <var>position</var>, and let <var>digits</var> be the resulting
   sequence.<li><p>If <var>digits</var> is the empty string, there is no <a href=#presentational-hints id=phrasing-content-3:presentational-hints-6>presentational hint</a>. Return.<li><p>Interpret <var>digits</var> as a base-ten integer. Let <var>value</var> be the resulting
   number.<li>
    

    <p>If <var>mode</var> is <i>relative-plus</i>, then increment <var>value</var> by 3. If
    <var>mode</var> is <i>relative-minus</i>, then let <var>value</var> be the result of subtracting
    <var>value</var> from 3.</p>
   <li><p>If <var>value</var> is greater than 7, let it be 7.<li><p>If <var>value</var> is less than 1, let it be 1.<li>
    <p>Set the <a id="phrasing-content-3:'font-size'-2" href=https://drafts.csswg.org/css-fonts/#font-size-prop data-x-internal="'font-size'">'font-size'</a> property to the keyword corresponding to the value of <var>value</var>
    according to the following table:</p>

    <table><thead><tr><th><var>value</var>
       <th><a id="phrasing-content-3:'font-size'-3" href=https://drafts.csswg.org/css-fonts/#font-size-prop data-x-internal="'font-size'">'font-size'</a> keyword
     <tbody><tr><td>1
       <td>'x-small'
      <tr><td>2
       <td>'small'
      <tr><td>3
       <td>'medium'
      <tr><td>4
       <td>'large'
      <tr><td>5
       <td>'x-large'
      <tr><td>6
       <td>'xx-large'
      <tr><td>7
       <td>'xxx-large'
    </table>
   </ol>


  <h4 id=bidi-rendering><span class=secno>15.3.5</span> Bidirectional text<a href=#bidi-rendering class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>[dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) </c-><c- p>{</c-> <c- k>direction</c-><c- p>:</c-> ltr<c- p>;</c-> <c- p>}</c->
<c- f>[dir]:dir(rtl), bdi:dir(rtl) </c-><c- p>{</c-> <c- k>direction</c-><c- p>:</c-> rtl<c- p>;</c-> <c- p>}</c->

<c- f>address, blockquote, center, div, figure, figcaption, footer, form, header, hr,</c->
<c- f>legend, listing, main, p, plaintext, pre, summary, xmp, article, aside,</c->
<c- f>:heading, hgroup, nav, section, search, table, caption, colgroup, col, thead,</c->
<c- f>tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, bdi, output,</c->
<c- f>[dir=ltr i], [dir=rtl i], [dir=auto i] </c-><c- p>{</c->
  <c- k>unicode-bidi</c-><c- p>:</c-> isolate<c- p>;</c-> 
<c- p>}</c->

<c- f>bdo, bdo[dir] </c-><c- p>{</c-> <c- k>unicode-bidi</c-><c- p>:</c-> isolate-override<c- p>;</c-> <c- p>}</c-> 

<c- f>input[dir=auto i]:is([type=search i], [type=tel i], [type=url i],</c->
<c- f>[type=email i]), textarea[dir=auto i], pre[dir=auto i] </c-><c- p>{</c->
  <c- k>unicode-bidi</c-><c- p>:</c-> plaintext<c- p>;</c->
<c- p>}</c->
<c- c>/* see prose for input elements whose type attribute is in the Text state */</c->

<c- c>/* the </c-><a href='#br-wbr-content'><c- c>rules setting the &apos;content&apos; property</c-></a><c- c> on </c-><code id='bidi-rendering:the-br-element'><a href='text-level-semantics.html#the-br-element'><c- c>br</c-></a></code><c- c> and </c-><code id='bidi-rendering:the-wbr-element'><a href='text-level-semantics.html#the-wbr-element'><c- c>wbr</c-></a></code><c- c> elements also has bidi implications */</c-></code></pre>

  <p>When an <code id=bidi-rendering:the-input-element><a href=input.html#the-input-element>input</a></code> element's <code id=bidi-rendering:attr-dir><a href=dom.html#attr-dir>dir</a></code> attribute is in the
  <a href=dom.html#attr-dir-auto id=bidi-rendering:attr-dir-auto>auto</a> state and its <code id=bidi-rendering:attr-input-type><a href=input.html#attr-input-type>type</a></code>
  attribute is in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="bidi-rendering:text-(type=text)-state-and-search-state-(type=search)">Text</a> state, then the user agent is
  expected to act as if it had a user-agent-level style sheet rule setting the
  <a id="bidi-rendering:'unicode-bidi'" href=https://drafts.csswg.org/css-writing-modes/#unicode-bidi data-x-internal="'unicode-bidi'">'unicode-bidi'</a> property to 'plaintext'.</p>

  <p>Input fields (i.e. <code id=bidi-rendering:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> elements, and <code id=bidi-rendering:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements when their
  <code id=bidi-rendering:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="bidi-rendering:text-(type=text)-state-and-search-state-(type=search)-2">Text</a>, <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="bidi-rendering:text-(type=text)-state-and-search-state-(type=search)-3">Search</a>,
  <a href="input.html#telephone-state-(type=tel)" id="bidi-rendering:telephone-state-(type=tel)">Telephone</a>, <a href="input.html#url-state-(type=url)" id="bidi-rendering:url-state-(type=url)">URL</a>,
  or <a href="input.html#email-state-(type=email)" id="bidi-rendering:email-state-(type=email)">Email</a> state) are expected to present an editing
  user interface with a directionality that matches the element's <a id="bidi-rendering:'direction'" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a>
  property.</p>

  <p>When the document's character encoding is <a id=bidi-rendering:iso-8859-8 href=https://encoding.spec.whatwg.org/#iso-8859-8 data-x-internal=iso-8859-8>ISO-8859-8</a>, the following rules are
  additionally expected to apply, following those above: <a href=references.html#refsENCODING>[ENCODING]</a></p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>address, blockquote, center, div, figure, figcaption, footer, form, header, hr,</c->
<c- f>legend, listing, main, p, plaintext, pre, summary, xmp, article, aside,</c->
<c- f>:heading, hgroup, nav, section, search, table, caption, colgroup, col, thead,</c->
<c- f>tbody, tfoot, tr, td, th, dir, dd, dl, dt, menu, ol, ul, li, [dir=ltr i],</c->
<c- f>[dir=rtl i], [dir=auto i], *|* </c-><c- p>{</c->
  <c- k>unicode-bidi</c-><c- p>:</c-> bidi-override<c- p>;</c->
<c- p>}</c->
<c- f>input:not([type=submit i]):not([type=reset i]):not([type=button i]),</c->
<c- f>textarea </c-><c- p>{</c->
  <c- k>unicode-bidi</c-><c- p>:</c-> normal<c- p>;</c->
<c- p>}</c-></code></pre>


  <h4 id=sections-and-headings><span class=secno>15.3.6</span> Sections and headings<a href=#sections-and-headings class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>article, aside, :heading, hgroup, nav, section </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> block<c- p>;</c->
<c- p>}</c->

<c- f>h1 </c-><c- p>{</c-> <c- k>margin-block</c-><c- p>:</c-> <c- m>0.67</c-><c- l>em</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>2.00</c-><c- l>em</c-><c- p>;</c-> <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c-> <c- p>}</c->
<c- f>h2 </c-><c- p>{</c-> <c- k>margin-block</c-><c- p>:</c-> <c- m>0.83</c-><c- l>em</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>1.50</c-><c- l>em</c-><c- p>;</c-> <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c-> <c- p>}</c->
<c- f>h3 </c-><c- p>{</c-> <c- k>margin-block</c-><c- p>:</c-> <c- m>1.00</c-><c- l>em</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>1.17</c-><c- l>em</c-><c- p>;</c-> <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c-> <c- p>}</c->
<c- f>h4 </c-><c- p>{</c-> <c- k>margin-block</c-><c- p>:</c-> <c- m>1.33</c-><c- l>em</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>1.00</c-><c- l>em</c-><c- p>;</c-> <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c-> <c- p>}</c->
<c- f>h5 </c-><c- p>{</c-> <c- k>margin-block</c-><c- p>:</c-> <c- m>1.67</c-><c- l>em</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>0.83</c-><c- l>em</c-><c- p>;</c-> <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c-> <c- p>}</c->
<c- f>h6 </c-><c- p>{</c-> <c- k>margin-block</c-><c- p>:</c-> <c- m>2.33</c-><c- l>em</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>0.67</c-><c- l>em</c-><c- p>;</c-> <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c-> <c- p>}</c-></code></pre>



  <h4 id=lists><span class=secno>15.3.7</span> Lists<a href=#lists class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>dir, dd, dl, dt, menu, ol, ul </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- p>}</c->
<c- f>li </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> list-item<c- p>;</c-> <c- k>text-align</c-><c- p>:</c-> match-parent<c- p>;</c-> <c- p>}</c->

<c- f>dir, dl, menu, ol, ul </c-><c- p>{</c-> <c- k>margin-block</c-><c- p>:</c-> <c- m>1</c-><c- l>em</c-><c- p>;</c-> <c- p>}</c->

<c- f>:is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) </c-><c- p>{</c->
  <c- k>margin-block</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c->
<c- p>}</c->

<c- f>dd </c-><c- p>{</c-> <c- k>margin-inline-start</c-><c- p>:</c-> <c- m>40</c-><c- l>px</c-><c- p>;</c-> <c- p>}</c->
<c- f>dir, menu, ol, ul </c-><c- p>{</c-> <c- k>padding-inline-start</c-><c- p>:</c-> <c- m>40</c-><c- l>px</c-><c- p>;</c-> <c- p>}</c->

<c- f>ol, ul, menu </c-><c- p>{</c-> <c- k>counter-reset</c-><c- p>:</c-> list-item<c- p>;</c-> <c- p>}</c->
<c- f>ol </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> decimal<c- p>;</c-> <c- p>}</c->

<c- f>dir, menu, ul </c-><c- p>{</c->
  <c- k>list-style-type</c-><c- p>:</c-> disc<c- p>;</c->
<c- p>}</c->
<c- f>:is(dir, menu, ol, ul) :is(dir, menu, ul) </c-><c- p>{</c->
  <c- k>list-style-type</c-><c- p>:</c-> circle<c- p>;</c->
<c- p>}</c->
<c- f>:is(dir, menu, ol, ul) :is(dir, menu, ol, ul) :is(dir, menu, ul) </c-><c- p>{</c->
  <c- k>list-style-type</c-><c- p>:</c-> square<c- p>;</c->
<c- p>}</c-></code></pre>

  <p id=decohints>The following rules are also expected to apply, as <a href=#presentational-hints id=lists:presentational-hints>presentational
  hints</a>:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>ol[type=&quot;1&quot;], li[type=&quot;1&quot;] </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> decimal<c- p>;</c-> <c- p>}</c->
<c- f>ol[type=a </c-><c- f>s], li[type=a </c-><c- f>s] </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> lower-alpha<c- p>;</c-> <c- p>}</c->
<c- f>ol[type=A </c-><c- f>s], li[type=A </c-><c- f>s] </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> upper-alpha<c- p>;</c-> <c- p>}</c->
<c- f>ol[type=i s], li[type=i s] </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> lower-roman<c- p>;</c-> <c- p>}</c->
<c- f>ol[type=I s], li[type=I s] </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> upper-roman<c- p>;</c-> <c- p>}</c->
<c- f>ul[type=none i], li[type=none i] </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> none<c- p>;</c-> <c- p>}</c->
<c- f>ul[type=disc i], li[type=disc i] </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> disc<c- p>;</c-> <c- p>}</c->
<c- f>ul[type=circle i], li[type=circle i] </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> circle<c- p>;</c-> <c- p>}</c->
<c- f>ul[type=square i], li[type=square i] </c-><c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> square<c- p>;</c-> <c- p>}</c-></code></pre>

  <p>In <a id=lists:quirks-mode href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, the following rules are also expected to apply:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>li </c-><c- p>{</c-> <c- k>list-style-position</c-><c- p>:</c-> inside<c- p>;</c-> <c- p>}</c->
<c- f>li :is(dir, menu, ol, ul) </c-><c- p>{</c-> <c- k>list-style-position</c-><c- p>:</c-> outside<c- p>;</c-> <c- p>}</c->
<c- f>:is(dir, menu, ol, ul) :is(dir, menu, ol, ul, li) </c-><c- p>{</c-> <c- k>list-style-position</c-><c- p>:</c-> unset<c- p>;</c-> <c- p>}</c-></code></pre>

  <p>When rendering <code id=lists:the-li-element><a href=grouping-content.html#the-li-element>li</a></code> elements, non-CSS user agents are expected to use the
  <a id=lists:ordinal-value href=grouping-content.html#ordinal-value>ordinal value</a> of the <code id=lists:the-li-element-2><a href=grouping-content.html#the-li-element>li</a></code> element to render the counter in the list item
  marker.</p>

  <p id=css-list-rendering>For CSS user agents, some aspects of rendering <a href=https://drafts.csswg.org/css-lists/#list-item id=lists:css-list-item data-x-internal=css-list-item>list items</a> are defined by the <cite>CSS Lists</cite> specification.
  Additionally, the following attribute mappings are expected to apply: <a href=references.html#refsCSSLISTS>[CSSLISTS]</a></p>

  <p>When an <code id=lists:the-li-element-3><a href=grouping-content.html#the-li-element>li</a></code> element has a <code id=lists:attr-li-value><a href=grouping-content.html#attr-li-value>value</a></code> attribute, and parsing that attribute's value using the
  <a id=lists:rules-for-parsing-integers href=common-microsyntaxes.html#rules-for-parsing-integers>rules for parsing integers</a> doesn't generate an error, the user agent is expected to
  use the parsed value <var>value</var> as a <a href=#presentational-hints id=lists:presentational-hints-2>presentational
  hint</a> for the <a id="lists:'counter-set'" href=https://drafts.csswg.org/css-lists/#propdef-counter-set data-x-internal="'counter-set'">'counter-set'</a> property of the form <code>list-item
  <var>value</var></code>.</p>

  <p>When an <code id=lists:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code> element has a <code id=lists:attr-ol-start><a href=grouping-content.html#attr-ol-start>start</a></code>
  attribute or a <code id=lists:attr-ol-reversed><a href=grouping-content.html#attr-ol-reversed>reversed</a></code> attribute, or both, the user agent
  is expected to use the following steps to treat the attributes as a <a href=#presentational-hints id=lists:presentational-hints-3>presentational hint</a> for the <a id="lists:'counter-reset'" href=https://drafts.csswg.org/css-lists/#propdef-counter-reset data-x-internal="'counter-reset'">'counter-reset'</a> property:</p>

  <ol><li><p>Let <var>value</var> be null.<li><p>If the element has a <code id=lists:attr-ol-start-2><a href=grouping-content.html#attr-ol-start>start</a></code> attribute, then set
   <var>value</var> to the result of parsing the attribute's value using the <a id=lists:rules-for-parsing-integers-2 href=common-microsyntaxes.html#rules-for-parsing-integers>rules for
   parsing integers</a>.<li>
    <p>If the element has a <code id=lists:attr-ol-reversed-2><a href=grouping-content.html#attr-ol-reversed>reversed</a></code> attribute, then:</p>

    <ol><li><p>If <var>value</var> is an integer, then increment <var>value</var> by 1 and return
     <code>reversed(list-item) <var>value</var></code>.<li>
      <p>Otherwise, return <code>reversed(list-item)</code>.</p>

      <p class=note>Either the <code id=lists:attr-ol-start-3><a href=grouping-content.html#attr-ol-start>start</a></code> attribute was absent, or
      parsing its value resulted in an error.</p>
     </ol>
   <li>
    <p>Otherwise:</p>

    <ol><li><p>If <var>value</var> is an integer, then decrement <var>value</var> by 1 and return
     <code>list-item <var>value</var></code>.<li><p>Otherwise, there is no <a href=#presentational-hints id=lists:presentational-hints-4>presentational
     hint</a>.</ol>
   </ol>


  <h4 id=tables-2><span class=secno>15.3.8</span> Tables<a href=#tables-2 class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>table </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> table<c- p>;</c-> <c- p>}</c->
<c- f>caption </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> table-caption<c- p>;</c-> <c- p>}</c->
<c- f>colgroup, colgroup[hidden] </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> table-column-group<c- p>;</c-> <c- p>}</c->
<c- f>col, col[hidden] </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> table-column<c- p>;</c-> <c- p>}</c->
<c- f>thead, thead[hidden] </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> table-header-group<c- p>;</c-> <c- p>}</c->
<c- f>tbody, tbody[hidden] </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> table-row-group<c- p>;</c-> <c- p>}</c->
<c- f>tfoot, tfoot[hidden] </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> table-footer-group<c- p>;</c-> <c- p>}</c->
<c- f>tr, tr[hidden] </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> table-row<c- p>;</c-> <c- p>}</c->
<c- f>td, th </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> table-cell<c- p>;</c-> <c- p>}</c->

<c- f>colgroup[hidden], col[hidden], thead[hidden], tbody[hidden],</c->
<c- f>tfoot[hidden], tr[hidden] </c-><c- p>{</c->
  <c- k>visibility</c-><c- p>:</c-> collapse<c- p>;</c->
<c- p>}</c->

<c- f>table </c-><c- p>{</c->
  <c- k>box-sizing</c-><c- p>:</c-> border-box<c- p>;</c->
  <c- k>border-spacing</c-><c- p>:</c-> <c- m>2</c-><c- l>px</c-><c- p>;</c->
  <c- k>border-collapse</c-><c- p>:</c-> separate<c- p>;</c->
  <c- k>text-indent</c-><c- p>:</c-> initial<c- p>;</c->
<c- p>}</c->
<c- f>td, th </c-><c- p>{</c-> <c- k>padding</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c-> <c- p>}</c->
<c- f>th </c-><c- p>{</c-> <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c-> <c- p>}</c->

<c- f>caption </c-><c- p>{</c-> <c- k>text-align</c-><c- p>:</c-> center<c- p>;</c-> <c- p>}</c->
<c- f>thead, tbody, tfoot, table &gt; tr </c-><c- p>{</c-> <c- k>vertical-align</c-><c- p>:</c-> middle<c- p>;</c-> <c- p>}</c->
<c- f>tr, td, th </c-><c- p>{</c-> <c- k>vertical-align</c-><c- p>:</c-> inherit<c- p>;</c-> <c- p>}</c->

<c- f>thead, tbody, tfoot, tr </c-><c- p>{</c-> <c- k>border-color</c-><c- p>:</c-> inherit<c- p>;</c-> <c- p>}</c->
<c- f>table[rules=none i], table[rules=groups i], table[rules=rows i],</c->
<c- f>table[rules=cols i], table[rules=all i], table[frame=void i],</c->
<c- f>table[frame=above i], table[frame=below i], table[frame=hsides i],</c->
<c- f>table[frame=lhs i], table[frame=rhs i], table[frame=vsides i],</c->
<c- f>table[frame=box i], table[frame=border i],</c->
<c- f>table[rules=none i] &gt; tr &gt; td, table[rules=none i] &gt; tr &gt; th,</c->
<c- f>table[rules=groups i] &gt; tr &gt; td, table[rules=groups i] &gt; tr &gt; th,</c->
<c- f>table[rules=rows i] &gt; tr &gt; td, table[rules=rows i] &gt; tr &gt; th,</c->
<c- f>table[rules=cols i] &gt; tr &gt; td, table[rules=cols i] &gt; tr &gt; th,</c->
<c- f>table[rules=all i] &gt; tr &gt; td, table[rules=all i] &gt; tr &gt; th,</c->
<c- f>table[rules=none i] &gt; thead &gt; tr &gt; td, table[rules=none i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=groups i] &gt; thead &gt; tr &gt; td, table[rules=groups i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=rows i] &gt; thead &gt; tr &gt; td, table[rules=rows i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=cols i] &gt; thead &gt; tr &gt; td, table[rules=cols i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=all i] &gt; thead &gt; tr &gt; td, table[rules=all i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=none i] &gt; tbody &gt; tr &gt; td, table[rules=none i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=groups i] &gt; tbody &gt; tr &gt; td, table[rules=groups i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=rows i] &gt; tbody &gt; tr &gt; td, table[rules=rows i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=cols i] &gt; tbody &gt; tr &gt; td, table[rules=cols i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=all i] &gt; tbody &gt; tr &gt; td, table[rules=all i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=none i] &gt; tfoot &gt; tr &gt; td, table[rules=none i] &gt; tfoot &gt; tr &gt; th,</c->
<c- f>table[rules=groups i] &gt; tfoot &gt; tr &gt; td, table[rules=groups i] &gt; tfoot &gt; tr &gt; th,</c->
<c- f>table[rules=rows i] &gt; tfoot &gt; tr &gt; td, table[rules=rows i] &gt; tfoot &gt; tr &gt; th,</c->
<c- f>table[rules=cols i] &gt; tfoot &gt; tr &gt; td, table[rules=cols i] &gt; tfoot &gt; tr &gt; th,</c->
<c- f>table[rules=all i] &gt; tfoot &gt; tr &gt; td, table[rules=all i] &gt; tfoot &gt; tr &gt; th </c-><c- p>{</c->
  <c- k>border-color</c-><c- p>:</c-> black<c- p>;</c->
<c- p>}</c-></code></pre>

  <p>The following rules are also expected to apply, as <a href=#presentational-hints id=tables-2:presentational-hints>presentational hints</a>:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>table[align=left i] </c-><c- p>{</c-> <c- k>float</c-><c- p>:</c-> left<c- p>;</c-> <c- p>}</c->
<c- f>table[align=right i] </c-><c- p>{</c-> <c- k>float</c-><c- p>:</c-> right<c- p>;</c-> <c- p>}</c->
<c- f>table[align=center i] </c-><c- p>{</c-> <c- k>margin-inline</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c->
<c- f>thead[align=absmiddle i], tbody[align=absmiddle i], tfoot[align=absmiddle i],</c->
<c- f>tr[align=absmiddle i], td[align=absmiddle i], th[align=absmiddle i] </c-><c- p>{</c->
  <c- k>text-align</c-><c- p>:</c-> center<c- p>;</c->
<c- p>}</c->

<c- f>caption[align=bottom i] </c-><c- p>{</c-> <c- k>caption-side</c-><c- p>:</c-> bottom<c- p>;</c-> <c- p>}</c->
<c- f>p[align=left i], h1[align=left i], h2[align=left i], h3[align=left i],</c->
<c- f>h4[align=left i], h5[align=left i], h6[align=left i] </c-><c- p>{</c->
  <c- k>text-align</c-><c- p>:</c-> left<c- p>;</c->
<c- p>}</c->
<c- f>p[align=right i], h1[align=right i], h2[align=right i], h3[align=right i],</c->
<c- f>h4[align=right i], h5[align=right i], h6[align=right i] </c-><c- p>{</c->
  <c- k>text-align</c-><c- p>:</c-> right<c- p>;</c->
<c- p>}</c->
<c- f>p[align=center i], h1[align=center i], h2[align=center i], h3[align=center i],</c->
<c- f>h4[align=center i], h5[align=center i], h6[align=center i] </c-><c- p>{</c->
  <c- k>text-align</c-><c- p>:</c-> center<c- p>;</c->
<c- p>}</c->
<c- f>p[align=justify i], h1[align=justify i], h2[align=justify i], h3[align=justify i],</c->
<c- f>h4[align=justify i], h5[align=justify i], h6[align=justify i] </c-><c- p>{</c->
  <c- k>text-align</c-><c- p>:</c-> justify<c- p>;</c->
<c- p>}</c->
<c- f>thead[valign=top i], tbody[valign=top i], tfoot[valign=top i],</c->
<c- f>tr[valign=top i], td[valign=top i], th[valign=top i] </c-><c- p>{</c->
  <c- k>vertical-align</c-><c- p>:</c-> top<c- p>;</c->
<c- p>}</c->
<c- f>thead[valign=middle i], tbody[valign=middle i], tfoot[valign=middle i],</c->
<c- f>tr[valign=middle i], td[valign=middle i], th[valign=middle i] </c-><c- p>{</c->
  <c- k>vertical-align</c-><c- p>:</c-> middle<c- p>;</c->
<c- p>}</c->
<c- f>thead[valign=bottom i], tbody[valign=bottom i], tfoot[valign=bottom i],</c->
<c- f>tr[valign=bottom i], td[valign=bottom i], th[valign=bottom i] </c-><c- p>{</c->
  <c- k>vertical-align</c-><c- p>:</c-> bottom<c- p>;</c->
<c- p>}</c->
<c- f>thead[valign=baseline i], tbody[valign=baseline i], tfoot[valign=baseline i],</c->
<c- f>tr[valign=baseline i], td[valign=baseline i], th[valign=baseline i] </c-><c- p>{</c->
  <c- k>vertical-align</c-><c- p>:</c-> baseline<c- p>;</c->
<c- p>}</c->

<c- f>td[nowrap], th[nowrap] </c-><c- p>{</c-> <c- k>white-space</c-><c- p>:</c-> nowrap<c- p>;</c-> <c- p>}</c->

<c- f>table[rules=none i], table[rules=groups i], table[rules=rows i],</c->
<c- f>table[rules=cols i], table[rules=all i] </c-><c- p>{</c->
  <c- k>border-style</c-><c- p>:</c-> hidden<c- p>;</c->
  <c- k>border-collapse</c-><c- p>:</c-> collapse<c- p>;</c->
<c- p>}</c->
<c- f>table[border] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> outset<c- p>;</c-> <c- p>}</c-> <c- c>/* </c-><a href='#magic-border-selector' id='tables-2:magic-border-selector'><c- c>only if border is not equivalent to zero</c-></a><c- c> */</c->
<c- f>table[frame=void i] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> hidden<c- p>;</c-> <c- p>}</c->
<c- f>table[frame=above i] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> outset hidden hidden hidden<c- p>;</c-> <c- p>}</c->
<c- f>table[frame=below i] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> hidden hidden outset hidden<c- p>;</c-> <c- p>}</c->
<c- f>table[frame=hsides i] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> outset hidden outset hidden<c- p>;</c-> <c- p>}</c->
<c- f>table[frame=lhs i] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> hidden hidden hidden outset<c- p>;</c-> <c- p>}</c->
<c- f>table[frame=rhs i] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> hidden outset hidden hidden<c- p>;</c-> <c- p>}</c->
<c- f>table[frame=vsides i] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> hidden outset<c- p>;</c-> <c- p>}</c->
<c- f>table[frame=box i], table[frame=border i] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> outset<c- p>;</c-> <c- p>}</c->

<c- f>table[border] &gt; tr &gt; td, table[border] &gt; tr &gt; th,</c->
<c- f>table[border] &gt; thead &gt; tr &gt; td, table[border] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[border] &gt; tbody &gt; tr &gt; td, table[border] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[border] &gt; tfoot &gt; tr &gt; td, table[border] &gt; tfoot &gt; tr &gt; th </c-><c- p>{</c->
  <c- c>/* </c-><a href='#magic-border-selector' id='tables-2:magic-border-selector-2'><c- c>only if border is not equivalent to zero</c-></a><c- c> */</c->
  <c- k>border-width</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>border-style</c-><c- p>:</c-> inset<c- p>;</c->
<c- p>}</c->
<c- f>table[rules=none i] &gt; tr &gt; td, table[rules=none i] &gt; tr &gt; th,</c->
<c- f>table[rules=none i] &gt; thead &gt; tr &gt; td, table[rules=none i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=none i] &gt; tbody &gt; tr &gt; td, table[rules=none i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=none i] &gt; tfoot &gt; tr &gt; td, table[rules=none i] &gt; tfoot &gt; tr &gt; th,</c->
<c- f>table[rules=groups i] &gt; tr &gt; td, table[rules=groups i] &gt; tr &gt; th,</c->
<c- f>table[rules=groups i] &gt; thead &gt; tr &gt; td, table[rules=groups i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=groups i] &gt; tbody &gt; tr &gt; td, table[rules=groups i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=groups i] &gt; tfoot &gt; tr &gt; td, table[rules=groups i] &gt; tfoot &gt; tr &gt; th,</c->
<c- f>table[rules=rows i] &gt; tr &gt; td, table[rules=rows i] &gt; tr &gt; th,</c->
<c- f>table[rules=rows i] &gt; thead &gt; tr &gt; td, table[rules=rows i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=rows i] &gt; tbody &gt; tr &gt; td, table[rules=rows i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=rows i] &gt; tfoot &gt; tr &gt; td, table[rules=rows i] &gt; tfoot &gt; tr &gt; th </c-><c- p>{</c->
  <c- k>border-width</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>border-style</c-><c- p>:</c-> none<c- p>;</c->
<c- p>}</c->
<c- f>table[rules=cols i] &gt; tr &gt; td, table[rules=cols i] &gt; tr &gt; th,</c->
<c- f>table[rules=cols i] &gt; thead &gt; tr &gt; td, table[rules=cols i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=cols i] &gt; tbody &gt; tr &gt; td, table[rules=cols i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=cols i] &gt; tfoot &gt; tr &gt; td, table[rules=cols i] &gt; tfoot &gt; tr &gt; th </c-><c- p>{</c->
  <c- k>border-width</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>border-block-style</c-><c- p>:</c-> none<c- p>;</c->
  <c- k>border-inline-style</c-><c- p>:</c-> solid<c- p>;</c->
<c- p>}</c->
<c- f>table[rules=all i] &gt; tr &gt; td, table[rules=all i] &gt; tr &gt; th,</c->
<c- f>table[rules=all i] &gt; thead &gt; tr &gt; td, table[rules=all i] &gt; thead &gt; tr &gt; th,</c->
<c- f>table[rules=all i] &gt; tbody &gt; tr &gt; td, table[rules=all i] &gt; tbody &gt; tr &gt; th,</c->
<c- f>table[rules=all i] &gt; tfoot &gt; tr &gt; td, table[rules=all i] &gt; tfoot &gt; tr &gt; th </c-><c- p>{</c->
  <c- k>border-width</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>border-style</c-><c- p>:</c-> solid<c- p>;</c->
<c- p>}</c->

<c- f>table[rules=groups i] &gt; colgroup </c-><c- p>{</c->
  <c- k>border-inline-width</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>border-inline-style</c-><c- p>:</c-> solid<c- p>;</c->
<c- p>}</c->
<c- f>table[rules=groups i] &gt; thead,</c->
<c- f>table[rules=groups i] &gt; tbody,</c->
<c- f>table[rules=groups i] &gt; tfoot </c-><c- p>{</c->
  <c- k>border-block-width</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>border-block-style</c-><c- p>:</c-> solid<c- p>;</c->
<c- p>}</c->

<c- f>table[rules=rows i] &gt; tr, table[rules=rows i] &gt; thead &gt; tr,</c->
<c- f>table[rules=rows i] &gt; tbody &gt; tr, table[rules=rows i] &gt; tfoot &gt; tr </c-><c- p>{</c->
  <c- k>border-block-width</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>border-block-style</c-><c- p>:</c-> solid<c- p>;</c->
<c- p>}</c-></code></pre>




  <p>In <a id=tables-2:quirks-mode href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, the following rules are also expected to apply:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>table </c-><c- p>{</c->
  <c- k>font-weight</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>font-style</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>font-variant</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>font-size</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>line-height</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>white-space</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>text-align</c-><c- p>:</c-> initial<c- p>;</c->
<c- p>}</c-></code></pre>

  <hr>

  <p>For the purposes of the CSS table model, the <code id=tables-2:the-col-element><a href=tables.html#the-col-element>col</a></code> element is expected to be treated
  as if it was present as many times as its <code id=tables-2:attr-col-span><a href=tables.html#attr-col-span>span</a></code> attribute <a href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers id=tables-2:rules-for-parsing-non-negative-integers>specifies</a>.</p>

  <p>For the purposes of the CSS table model, the <code id=tables-2:the-colgroup-element><a href=tables.html#the-colgroup-element>colgroup</a></code> element, if it contains no
  <code id=tables-2:the-col-element-2><a href=tables.html#the-col-element>col</a></code> element, is expected to be treated as if it had as many such children as its
  <code id=tables-2:attr-colgroup-span><a href=tables.html#attr-colgroup-span>span</a></code> attribute <a href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers id=tables-2:rules-for-parsing-non-negative-integers-2>specifies</a>.</p>

  <p>For the purposes of the CSS table model, the <code id=tables-2:attr-tdth-colspan><a href=tables.html#attr-tdth-colspan>colspan</a></code> and
  <code id=tables-2:attr-tdth-rowspan><a href=tables.html#attr-tdth-rowspan>rowspan</a></code> attributes on <code id=tables-2:the-td-element><a href=tables.html#the-td-element>td</a></code> and <code id=tables-2:the-th-element><a href=tables.html#the-th-element>th</a></code>
  elements are expected to <a href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers id=tables-2:rules-for-parsing-non-negative-integers-3>provide</a> the
  <i>special knowledge</i> regarding cells spanning rows and columns.</p>

  <p>In <a id=tables-2:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, the following rules are also expected to apply:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>:is(table, thead, tbody, tfoot, tr) &gt; form </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> none !important; }</code></pre>

  <hr>

  <p>The <code id=tables-2:the-table-element><a href=tables.html#the-table-element>table</a></code> element's <code id=tables-2:attr-table-cellspacing><a href=obsolete.html#attr-table-cellspacing>cellspacing</a></code>
  attribute <a href=#maps-to-the-pixel-length-property id=tables-2:maps-to-the-pixel-length-property>maps to the pixel length property</a> <a id="tables-2:'border-spacing'" href=https://drafts.csswg.org/css-tables/#propdef-border-spacing data-x-internal="'border-spacing'">'border-spacing'</a> on the
  element.</p>

  <p>The <code id=tables-2:the-table-element-2><a href=tables.html#the-table-element>table</a></code> element's <code id=tables-2:attr-table-cellpadding><a href=obsolete.html#attr-table-cellpadding>cellpadding</a></code>
  attribute <a href=#maps-to-the-pixel-length-property id=tables-2:maps-to-the-pixel-length-property-2>maps to the pixel length
  properties</a> <a id="tables-2:'padding-top'" href=https://drafts.csswg.org/css-box/#propdef-padding-top data-x-internal="'padding-top'">'padding-top'</a>, <a id="tables-2:'padding-right'" href=https://drafts.csswg.org/css-box/#propdef-padding-right data-x-internal="'padding-right'">'padding-right'</a>,
  <a id="tables-2:'padding-bottom'" href=https://drafts.csswg.org/css-box/#propdef-padding-bottom data-x-internal="'padding-bottom'">'padding-bottom'</a>, and <a id="tables-2:'padding-left'" href=https://drafts.csswg.org/css-box/#propdef-padding-left data-x-internal="'padding-left'">'padding-left'</a> of any <code id=tables-2:the-td-element-2><a href=tables.html#the-td-element>td</a></code> and
  <code id=tables-2:the-th-element-2><a href=tables.html#the-th-element>th</a></code> elements that have corresponding <a href=tables.html#concept-cell id=tables-2:concept-cell>cells</a> in the
  <a href=tables.html#concept-table id=tables-2:concept-table>table</a> corresponding to the <code id=tables-2:the-table-element-3><a href=tables.html#the-table-element>table</a></code> element.</p>

  <p>The <code id=tables-2:the-table-element-4><a href=tables.html#the-table-element>table</a></code> element's <code id=tables-2:attr-table-height><a href=obsolete.html#attr-table-height>height</a></code> attribute
  <a href=#maps-to-the-dimension-property id=tables-2:maps-to-the-dimension-property>maps to the dimension property</a> <a id="tables-2:'height'" href=https://drafts.csswg.org/css2/#the-height-property data-x-internal="'height'">'height'</a> on the <code id=tables-2:the-table-element-5><a href=tables.html#the-table-element>table</a></code>
  element.</p>

  <p>The <code id=tables-2:the-table-element-6><a href=tables.html#the-table-element>table</a></code> element's <code id=tables-2:attr-table-width><a href=obsolete.html#attr-table-width>width</a></code> attribute
  <a href=#maps-to-the-dimension-property-(ignoring-zero) id=tables-2:maps-to-the-dimension-property-(ignoring-zero)>maps to the dimension property (ignoring zero)</a> <a id="tables-2:'width'" href=https://drafts.csswg.org/css2/#the-width-property data-x-internal="'width'">'width'</a> on the
  <code id=tables-2:the-table-element-7><a href=tables.html#the-table-element>table</a></code> element.</p>

  <p>The <code id=tables-2:the-col-element-3><a href=tables.html#the-col-element>col</a></code> element's <code id=tables-2:attr-col-width><a href=obsolete.html#attr-col-width>width</a></code> attribute <a href=#maps-to-the-dimension-property id=tables-2:maps-to-the-dimension-property-2>maps
  to the dimension property</a> <a id="tables-2:'width'-2" href=https://drafts.csswg.org/css2/#the-width-property data-x-internal="'width'">'width'</a> on the <code id=tables-2:the-col-element-4><a href=tables.html#the-col-element>col</a></code>
  element.</p>

  <p>The <code id=tables-2:the-thead-element><a href=tables.html#the-thead-element>thead</a></code>, <code id=tables-2:the-tbody-element><a href=tables.html#the-tbody-element>tbody</a></code>, and <code id=tables-2:the-tfoot-element><a href=tables.html#the-tfoot-element>tfoot</a></code> elements' <code id=tables-2:attr-tbody-height><a href=obsolete.html#attr-tbody-height>height</a></code> attribute <a href=#maps-to-the-dimension-property id=tables-2:maps-to-the-dimension-property-3>maps to the dimension property</a>
  <a id="tables-2:'height'-2" href=https://drafts.csswg.org/css2/#the-height-property data-x-internal="'height'">'height'</a> on the element.</p>

  <p>The <code id=tables-2:the-tr-element><a href=tables.html#the-tr-element>tr</a></code> element's <code id=tables-2:attr-tr-height><a href=obsolete.html#attr-tr-height>height</a></code> attribute <a href=#maps-to-the-dimension-property id=tables-2:maps-to-the-dimension-property-4>maps
  to the dimension property</a> <a id="tables-2:'height'-3" href=https://drafts.csswg.org/css2/#the-height-property data-x-internal="'height'">'height'</a> on the <code id=tables-2:the-tr-element-2><a href=tables.html#the-tr-element>tr</a></code> element.</p>

  <p>The <code id=tables-2:the-td-element-3><a href=tables.html#the-td-element>td</a></code> and <code id=tables-2:the-th-element-3><a href=tables.html#the-th-element>th</a></code> elements' <code id=tables-2:attr-tdth-height><a href=obsolete.html#attr-tdth-height>height</a></code>
  attributes <a href=#maps-to-the-dimension-property-(ignoring-zero) id=tables-2:maps-to-the-dimension-property-(ignoring-zero)-2>map to the dimension
  property (ignoring zero)</a> <a id="tables-2:'height'-4" href=https://drafts.csswg.org/css2/#the-height-property data-x-internal="'height'">'height'</a> on the element.</p>

  <p>The <code id=tables-2:the-td-element-4><a href=tables.html#the-td-element>td</a></code> and <code id=tables-2:the-th-element-4><a href=tables.html#the-th-element>th</a></code> elements' <code id=tables-2:attr-tdth-width><a href=obsolete.html#attr-tdth-width>width</a></code>
  attributes <a href=#maps-to-the-dimension-property-(ignoring-zero) id=tables-2:maps-to-the-dimension-property-(ignoring-zero)-3>map to the dimension
  property (ignoring zero)</a> <a id="tables-2:'width'-3" href=https://drafts.csswg.org/css2/#the-width-property data-x-internal="'width'">'width'</a> on the element.</p>

  <hr>

  <p>The <code id=tables-2:the-thead-element-2><a href=tables.html#the-thead-element>thead</a></code>, <code id=tables-2:the-tbody-element-2><a href=tables.html#the-tbody-element>tbody</a></code>, <code id=tables-2:the-tfoot-element-2><a href=tables.html#the-tfoot-element>tfoot</a></code>, <code id=tables-2:the-tr-element-3><a href=tables.html#the-tr-element>tr</a></code>,
  <code id=tables-2:the-td-element-5><a href=tables.html#the-td-element>td</a></code>, and <code id=tables-2:the-th-element-5><a href=tables.html#the-th-element>th</a></code> elements, when they have an <code>align</code>
  attribute whose value is an <a id=tables-2:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for either the string "<code>center</code>" or the string "<code>middle</code>", are expected to center
  text within themselves, as if they had their <a id="tables-2:'text-align'" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property set to 'center' in
  a <a href=#presentational-hints id=tables-2:presentational-hints-2>presentational hint</a>, and to <a href=#align-descendants id=tables-2:align-descendants>align
  descendants</a> to the center.</p>

  <p>The <code id=tables-2:the-thead-element-3><a href=tables.html#the-thead-element>thead</a></code>, <code id=tables-2:the-tbody-element-3><a href=tables.html#the-tbody-element>tbody</a></code>, <code id=tables-2:the-tfoot-element-3><a href=tables.html#the-tfoot-element>tfoot</a></code>, <code id=tables-2:the-tr-element-4><a href=tables.html#the-tr-element>tr</a></code>,
  <code id=tables-2:the-td-element-6><a href=tables.html#the-td-element>td</a></code>, and <code id=tables-2:the-th-element-6><a href=tables.html#the-th-element>th</a></code> elements, when they have an <code>align</code>
  attribute whose value is an <a id=tables-2:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>left</code>", are expected to left-align text within themselves, as if they had their
  <a id="tables-2:'text-align'-2" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property set to 'left' in a <a href=#presentational-hints id=tables-2:presentational-hints-3>presentational hint</a>, and to <a href=#align-descendants id=tables-2:align-descendants-2>align descendants</a> to the left.</p>

  <p>The <code id=tables-2:the-thead-element-4><a href=tables.html#the-thead-element>thead</a></code>, <code id=tables-2:the-tbody-element-4><a href=tables.html#the-tbody-element>tbody</a></code>, <code id=tables-2:the-tfoot-element-4><a href=tables.html#the-tfoot-element>tfoot</a></code>, <code id=tables-2:the-tr-element-5><a href=tables.html#the-tr-element>tr</a></code>,
  <code id=tables-2:the-td-element-7><a href=tables.html#the-td-element>td</a></code>, and <code id=tables-2:the-th-element-7><a href=tables.html#the-th-element>th</a></code> elements, when they have an <code>align</code>
  attribute whose value is an <a id=tables-2:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>right</code>", are expected to right-align text within themselves, as if they had their
  <a id="tables-2:'text-align'-3" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property set to 'right' in a <a href=#presentational-hints id=tables-2:presentational-hints-4>presentational hint</a>, and to <a href=#align-descendants id=tables-2:align-descendants-3>align descendants</a> to the right.</p>

  <p>The <code id=tables-2:the-thead-element-5><a href=tables.html#the-thead-element>thead</a></code>, <code id=tables-2:the-tbody-element-5><a href=tables.html#the-tbody-element>tbody</a></code>, <code id=tables-2:the-tfoot-element-5><a href=tables.html#the-tfoot-element>tfoot</a></code>, <code id=tables-2:the-tr-element-6><a href=tables.html#the-tr-element>tr</a></code>,
  <code id=tables-2:the-td-element-8><a href=tables.html#the-td-element>td</a></code>, and <code id=tables-2:the-th-element-8><a href=tables.html#the-th-element>th</a></code> elements, when they have an <code>align</code>
  attribute whose value is an <a id=tables-2:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>justify</code>", are expected to full-justify text within themselves, as if they had
  their <a id="tables-2:'text-align'-4" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property set to 'justify' in a <a href=#presentational-hints id=tables-2:presentational-hints-5>presentational hint</a>, and to <a href=#align-descendants id=tables-2:align-descendants-4>align descendants</a> to the left.</p>

  <p>User agents are expected to have a rule in their user agent style sheet that matches
  <code id=tables-2:the-th-element-9><a href=tables.html#the-th-element>th</a></code> elements that have a parent node whose <a id=tables-2:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> for the
  <a id="tables-2:'text-align'-5" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property is its initial value, whose declaration block consists of just
  a single declaration that sets the <a id="tables-2:'text-align'-6" href=https://drafts.csswg.org/css-text/#text-align-property data-x-internal="'text-align'">'text-align'</a> property to the value 'center'.</p>
  

  <hr>

  <p>When a <code id=tables-2:the-table-element-8><a href=tables.html#the-table-element>table</a></code>, <code id=tables-2:the-thead-element-6><a href=tables.html#the-thead-element>thead</a></code>, <code id=tables-2:the-tbody-element-6><a href=tables.html#the-tbody-element>tbody</a></code>, <code id=tables-2:the-tfoot-element-6><a href=tables.html#the-tfoot-element>tfoot</a></code>,
  <code id=tables-2:the-tr-element-7><a href=tables.html#the-tr-element>tr</a></code>, <code id=tables-2:the-td-element-9><a href=tables.html#the-td-element>td</a></code>, or <code id=tables-2:the-th-element-10><a href=tables.html#the-th-element>th</a></code> element has a <code id=tables-2:attr-background><a href=obsolete.html#attr-background>background</a></code> attribute set to a non-empty value, the new value is
  expected to be <a href=urls-and-fetching.html#encoding-parsing-and-serializing-a-url id=tables-2:encoding-parsing-and-serializing-a-url>encoding-parsed-and-serialized</a> relative to the element's <a id=tables-2:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>,
  and if that does not return failure, the user agent is expected to treat the attribute as a <a href=#presentational-hints id=tables-2:presentational-hints-6>presentational hint</a> setting the element's
  <a id="tables-2:'background-image'" href=https://drafts.csswg.org/css-backgrounds/#propdef-background-image data-x-internal="'background-image'">'background-image'</a> property to the return value.</p>

  <p>When a <code id=tables-2:the-table-element-9><a href=tables.html#the-table-element>table</a></code>, <code id=tables-2:the-thead-element-7><a href=tables.html#the-thead-element>thead</a></code>, <code id=tables-2:the-tbody-element-7><a href=tables.html#the-tbody-element>tbody</a></code>, <code id=tables-2:the-tfoot-element-7><a href=tables.html#the-tfoot-element>tfoot</a></code>,
  <code id=tables-2:the-tr-element-8><a href=tables.html#the-tr-element>tr</a></code>, <code id=tables-2:the-td-element-10><a href=tables.html#the-td-element>td</a></code>, or <code id=tables-2:the-th-element-11><a href=tables.html#the-th-element>th</a></code> element has a <code>bgcolor</code>
  attribute set, the new value is expected to be parsed using the <a id=tables-2:rules-for-parsing-a-legacy-colour-value href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy
  color value</a>, and if that does not return failure, the user agent is expected to treat the
  attribute as a <a href=#presentational-hints id=tables-2:presentational-hints-7>presentational hint</a> setting the element's
  <a id="tables-2:'background-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-background-color data-x-internal="'background-color'">'background-color'</a> property to the resulting color.</p>

  <p>When a <code id=tables-2:the-table-element-10><a href=tables.html#the-table-element>table</a></code> element has a <code id=tables-2:attr-table-bordercolor><a href=obsolete.html#attr-table-bordercolor>bordercolor</a></code>
  attribute, its value is expected to be parsed using the <a id=tables-2:rules-for-parsing-a-legacy-colour-value-2 href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy color
  value</a>, and if that does not return failure, the user agent is expected to treat the
  attribute as a <a href=#presentational-hints id=tables-2:presentational-hints-8>presentational hint</a> setting the
  element's <a id="tables-2:'border-top-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-top-color data-x-internal="'border-top-color'">'border-top-color'</a>, <a id="tables-2:'border-right-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-right-color data-x-internal="'border-right-color'">'border-right-color'</a>,
  <a id="tables-2:'border-bottom-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-bottom-color data-x-internal="'border-bottom-color'">'border-bottom-color'</a>, and <a id="tables-2:'border-left-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-left-color data-x-internal="'border-left-color'">'border-left-color'</a> properties to the
  resulting color.</p>

  <hr>

  <p>The <code id=tables-2:the-table-element-11><a href=tables.html#the-table-element>table</a></code> element's <code id=tables-2:attr-table-border><a href=obsolete.html#attr-table-border>border</a></code> attribute <a href=#maps-to-the-pixel-length-property id=tables-2:maps-to-the-pixel-length-property-3>maps to the pixel length properties</a>
  <a id="tables-2:'border-top-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-top-width data-x-internal="'border-top-width'">'border-top-width'</a>, <a id="tables-2:'border-right-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-right-width data-x-internal="'border-right-width'">'border-right-width'</a>,
  <a id="tables-2:'border-bottom-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-bottom-width data-x-internal="'border-bottom-width'">'border-bottom-width'</a>, <a id="tables-2:'border-left-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-left-width data-x-internal="'border-left-width'">'border-left-width'</a> on the element. If the
  attribute is present but parsing the attribute's value using the <a id=tables-2:rules-for-parsing-non-negative-integers-4 href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing
  non-negative integers</a> generates an error, a default value of 1px is expected to be used for
  that property instead.</p>

  <p>Rules marked "<dfn id=magic-border-selector>only if border is not equivalent to zero</dfn>"
  in the CSS block above is expected to only be applied if the <code id=tables-2:attr-table-border-2><a href=obsolete.html#attr-table-border>border</a></code> attribute mentioned in the selectors for the rule is not
  only present but, when parsed using the <a id=tables-2:rules-for-parsing-non-negative-integers-5 href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>, is
  also found to have a value other than zero or to generate an error.</p>

  <hr>

  <p>In <a id=tables-2:quirks-mode-2 href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, a <code id=tables-2:the-td-element-11><a href=tables.html#the-td-element>td</a></code> element or a <code id=tables-2:the-th-element-12><a href=tables.html#the-th-element>th</a></code> element that has a
  <code id=tables-2:attr-tdth-nowrap><a href=obsolete.html#attr-tdth-nowrap>nowrap</a></code> attribute but also has a <code id=tables-2:attr-tdth-width-2><a href=obsolete.html#attr-tdth-width>width</a></code> attribute whose value, when parsed using the <a id=tables-2:rules-for-parsing-non-zero-dimension-values href=common-microsyntaxes.html#rules-for-parsing-non-zero-dimension-values>rules for
  parsing nonzero dimension values</a>, is found to be a length (not an error or a number
  classified as a percentage), is expected to have a <a href=#presentational-hints id=tables-2:presentational-hints-9>presentational hint</a> setting the element's <a id="tables-2:'white-space'" href=https://drafts.csswg.org/css-text/#white-space-property data-x-internal="'white-space'">'white-space'</a> property to
  'normal', overriding the rule in the CSS block above that sets it to 'nowrap'.</p>  

  <h4 id=margin-collapsing-quirks><span class=secno>15.3.9</span> Margin collapsing quirks<a href=#margin-collapsing-quirks class=self-link></a></h4>

  <p>A node is <dfn id=concept-rendering-substantial>substantial</dfn> if it is a text node
  that is not <a id=margin-collapsing-quirks:inter-element-whitespace href=dom.html#inter-element-whitespace>inter-element whitespace</a>, or if it is an element node.</p>

  <p>A node is <dfn id=concept-rendering-blank>blank</dfn> if it is an element that contains no
  <a href=#concept-rendering-substantial id=margin-collapsing-quirks:concept-rendering-substantial>substantial</a> nodes.</p>

  <p>The <dfn id=concept-rendering-elements-with-margins>elements with default margins</dfn>
  are the following elements: <code id=margin-collapsing-quirks:the-blockquote-element><a href=grouping-content.html#the-blockquote-element>blockquote</a></code>, <code id=margin-collapsing-quirks:dir><a href=obsolete.html#dir>dir</a></code>, <code id=margin-collapsing-quirks:the-dl-element><a href=grouping-content.html#the-dl-element>dl</a></code>,
  <code id=margin-collapsing-quirks:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>, <code id=margin-collapsing-quirks:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code>, <code id=margin-collapsing-quirks:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-3><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h3</a></code>, <code id=margin-collapsing-quirks:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-4><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h4</a></code>, <code id=margin-collapsing-quirks:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-5><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h5</a></code>,
  <code id=margin-collapsing-quirks:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-6><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h6</a></code>, <code id=margin-collapsing-quirks:listing><a href=obsolete.html#listing>listing</a></code>, <code id=margin-collapsing-quirks:the-menu-element><a href=grouping-content.html#the-menu-element>menu</a></code>, <code id=margin-collapsing-quirks:the-ol-element><a href=grouping-content.html#the-ol-element>ol</a></code>,
  <code id=margin-collapsing-quirks:the-p-element><a href=grouping-content.html#the-p-element>p</a></code>, <code id=margin-collapsing-quirks:plaintext><a href=obsolete.html#plaintext>plaintext</a></code>, <code id=margin-collapsing-quirks:the-pre-element><a href=grouping-content.html#the-pre-element>pre</a></code>, <code id=margin-collapsing-quirks:the-ul-element><a href=grouping-content.html#the-ul-element>ul</a></code>, <code id=margin-collapsing-quirks:xmp><a href=obsolete.html#xmp>xmp</a></code>.</p>

  <p>In <a id=margin-collapsing-quirks:quirks-mode href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, any <a href=#concept-rendering-elements-with-margins id=margin-collapsing-quirks:concept-rendering-elements-with-margins>element
  with default margins</a> that is the <a href=https://dom.spec.whatwg.org/#concept-tree-child id=margin-collapsing-quirks:concept-tree-child data-x-internal=concept-tree-child>child</a> of a
  <code id=margin-collapsing-quirks:the-body-element><a href=sections.html#the-body-element>body</a></code>, <code id=margin-collapsing-quirks:the-td-element><a href=tables.html#the-td-element>td</a></code>, or <code id=margin-collapsing-quirks:the-th-element><a href=tables.html#the-th-element>th</a></code> element and has no <a href=#concept-rendering-substantial id=margin-collapsing-quirks:concept-rendering-substantial-2>substantial</a> previous siblings is expected to have a
  user-agent level style sheet rule that sets its <a id="margin-collapsing-quirks:'margin-block-start'" href=https://drafts.csswg.org/css-logical/#propdef-margin-block-start data-x-internal="'margin-block-start'">'margin-block-start'</a> property to
  zero.</p>

  <p>In <a id=margin-collapsing-quirks:quirks-mode-2 href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, any <a href=#concept-rendering-elements-with-margins id=margin-collapsing-quirks:concept-rendering-elements-with-margins-2>element
  with default margins</a> that is the <a href=https://dom.spec.whatwg.org/#concept-tree-child id=margin-collapsing-quirks:concept-tree-child-2 data-x-internal=concept-tree-child>child</a> of a
  <code id=margin-collapsing-quirks:the-body-element-2><a href=sections.html#the-body-element>body</a></code>, <code id=margin-collapsing-quirks:the-td-element-2><a href=tables.html#the-td-element>td</a></code>, or <code id=margin-collapsing-quirks:the-th-element-2><a href=tables.html#the-th-element>th</a></code> element, has no <a href=#concept-rendering-substantial id=margin-collapsing-quirks:concept-rendering-substantial-3>substantial</a> previous siblings, and is <a href=#concept-rendering-blank id=margin-collapsing-quirks:concept-rendering-blank>blank</a>, is expected to have a user-agent level style sheet
  rule that sets its <a id="margin-collapsing-quirks:'margin-block-end'" href=https://drafts.csswg.org/css-logical/#propdef-margin-block-end data-x-internal="'margin-block-end'">'margin-block-end'</a> property to zero also.</p>

  <p>In <a id=margin-collapsing-quirks:quirks-mode-3 href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, any <a href=#concept-rendering-elements-with-margins id=margin-collapsing-quirks:concept-rendering-elements-with-margins-3>element
  with default margins</a> that is the <a href=https://dom.spec.whatwg.org/#concept-tree-child id=margin-collapsing-quirks:concept-tree-child-3 data-x-internal=concept-tree-child>child</a> of a
  <code id=margin-collapsing-quirks:the-td-element-3><a href=tables.html#the-td-element>td</a></code> or <code id=margin-collapsing-quirks:the-th-element-3><a href=tables.html#the-th-element>th</a></code> element, has no <a href=#concept-rendering-substantial id=margin-collapsing-quirks:concept-rendering-substantial-4>substantial</a> following siblings, and is <a href=#concept-rendering-blank id=margin-collapsing-quirks:concept-rendering-blank-2>blank</a>, is expected to have a user-agent level style sheet
  rule that sets its <a id="margin-collapsing-quirks:'margin-block-start'-2" href=https://drafts.csswg.org/css-logical/#propdef-margin-block-start data-x-internal="'margin-block-start'">'margin-block-start'</a> property to zero.</p>

  <p>In <a id=margin-collapsing-quirks:quirks-mode-4 href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, any <code id=margin-collapsing-quirks:the-p-element-2><a href=grouping-content.html#the-p-element>p</a></code> element that is the <a href=https://dom.spec.whatwg.org/#concept-tree-child id=margin-collapsing-quirks:concept-tree-child-4 data-x-internal=concept-tree-child>child</a> of a <code id=margin-collapsing-quirks:the-td-element-4><a href=tables.html#the-td-element>td</a></code> or <code id=margin-collapsing-quirks:the-th-element-4><a href=tables.html#the-th-element>th</a></code> element and has
  no <a href=#concept-rendering-substantial id=margin-collapsing-quirks:concept-rendering-substantial-5>substantial</a> following siblings, is expected
  to have a user-agent level style sheet rule that sets its <a id="margin-collapsing-quirks:'margin-block-end'-2" href=https://drafts.csswg.org/css-logical/#propdef-margin-block-end data-x-internal="'margin-block-end'">'margin-block-end'</a> property
  to zero.</p>


  <h4 id=form-controls><span class=secno>15.3.10</span> Form controls<a href=#form-controls class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>input, select, button, textarea </c-><c- p>{</c->
  <c- k>letter-spacing</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>word-spacing</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>line-height</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>text-transform</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>text-indent</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>text-shadow</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>appearance</c-><c- p>:</c-> auto<c- p>;</c->
<c- p>}</c->

<c- f>input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) </c-><c- p>{</c->
  <c- k>overflow</c-><c- p>:</c-> clip !important;
  overflow-clip-margin: 0 !important;
}

input, select, textarea {
  text-align: initial;
}

:autofill {
  field-sizing: fixed !important;
}

input:is([type=reset i], [type=button i], [type=submit i]), button {
  text-align: center;
}

input, button {
  display: inline-block;
}

input[type=hidden i], input[type=file i], input[type=image i] {
  appearance: none;
}

input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i],
[type=submit i], [type=color i], [type=search i]), select, button {
  box-sizing: border-box;
}

textarea { white-space: pre-wrap; }</code></pre>

  <p>In <a id=form-controls:quirks-mode href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, the following rules are also expected to apply:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>input:not([type=image i]), textarea </c-><c- p>{</c-> <c- k>box-sizing</c-><c- p>:</c-> border-box<c- p>;</c-> <c- p>}</c-></code></pre>

  <p>Each kind of form control is also described in the <a href=#widgets>Widgets</a> section,
  which describes the look and feel of the control.</p>

  <p>For <code id=form-controls:the-input-element><a href=input.html#the-input-element>input</a></code> elements where the <code id=form-controls:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute
  is not in the <a href="input.html#hidden-state-(type=hidden)" id="form-controls:hidden-state-(type=hidden)">Hidden</a> state or the <a href="input.html#image-button-state-(type=image)" id="form-controls:image-button-state-(type=image)">Image Button</a> state, and that are <a href=#being-rendered id=form-controls:being-rendered>being
  rendered</a>, are expected to act as follows:</p>

  <ul><li><p>The <a id=form-controls:inner-display-type href=https://drafts.csswg.org/css-display/#inner-display-type data-x-internal=inner-display-type>inner display type</a> is always 'flow-root'.</ul>


  <h4 id=the-hr-element-2><span class=secno>15.3.11</span> The <code id=the-hr-element-2:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code> element<a href=#the-hr-element-2 class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>hr </c-><c- p>{</c->
  <c- k>color</c-><c- p>:</c-> gray<c- p>;</c->
  <c- k>border-style</c-><c- p>:</c-> inset<c- p>;</c->
  <c- k>border-width</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-><c- p>;</c->
  <c- k>margin-block</c-><c- p>:</c-> <c- m>0.5</c-><c- l>em</c-><c- p>;</c->
  <c- k>margin-inline</c-><c- p>:</c-> auto<c- p>;</c->
  <c- k>overflow</c-><c- p>:</c-> hidden<c- p>;</c->
<c- p>}</c-></code></pre>

  <p>The following rules are also expected to apply, as <a href=#presentational-hints id=the-hr-element-2:presentational-hints>presentational hints</a>:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>hr[align=left i] </c-><c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- k>margin-right</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c->
<c- f>hr[align=right i] </c-><c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> auto<c- p>;</c-> <c- k>margin-right</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c->
<c- f>hr[align=center i] </c-><c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> auto<c- p>;</c-> <c- k>margin-right</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c->
<c- f>hr[color], hr[noshade] </c-><c- p>{</c-> <c- k>border-style</c-><c- p>:</c-> solid<c- p>;</c-> <c- p>}</c-></code></pre>

  <p>If an <code id=the-hr-element-2:the-hr-element-2><a href=grouping-content.html#the-hr-element>hr</a></code> element has either a <code id=the-hr-element-2:attr-hr-color><a href=obsolete.html#attr-hr-color>color</a></code> attribute
  or a <code id=the-hr-element-2:attr-hr-noshade><a href=obsolete.html#attr-hr-noshade>noshade</a></code> attribute, and furthermore also has a <code id=the-hr-element-2:attr-hr-size><a href=obsolete.html#attr-hr-size>size</a></code> attribute, and parsing that attribute's value using the
  <a id=the-hr-element-2:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> doesn't generate an error, then the user
  agent is expected to use the parsed value divided by two as a pixel length for
  <a href=#presentational-hints id=the-hr-element-2:presentational-hints-2>presentational hints</a> for the properties <a id="the-hr-element-2:'border-top-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-top-width data-x-internal="'border-top-width'">'border-top-width'</a>,
  <a id="the-hr-element-2:'border-right-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-right-width data-x-internal="'border-right-width'">'border-right-width'</a>, <a id="the-hr-element-2:'border-bottom-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-bottom-width data-x-internal="'border-bottom-width'">'border-bottom-width'</a>, and
  <a id="the-hr-element-2:'border-left-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-left-width data-x-internal="'border-left-width'">'border-left-width'</a> on the element.</p>

  <p>Otherwise, if an <code id=the-hr-element-2:the-hr-element-3><a href=grouping-content.html#the-hr-element>hr</a></code> element has neither a <code id=the-hr-element-2:attr-hr-color-2><a href=obsolete.html#attr-hr-color>color</a></code>
  attribute nor a <code id=the-hr-element-2:attr-hr-noshade-2><a href=obsolete.html#attr-hr-noshade>noshade</a></code> attribute, but does have a <code id=the-hr-element-2:attr-hr-size-2><a href=obsolete.html#attr-hr-size>size</a></code> attribute, and parsing that attribute's value using the
  <a id=the-hr-element-2:rules-for-parsing-non-negative-integers-2 href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> doesn't generate an error, then: if the
  parsed value is one, then the user agent is expected to use the attribute as a <a href=#presentational-hints id=the-hr-element-2:presentational-hints-3>presentational hint</a> setting the element's
  <a id="the-hr-element-2:'border-bottom-width'-2" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-bottom-width data-x-internal="'border-bottom-width'">'border-bottom-width'</a> to 0; otherwise, if the parsed value is greater than one, then
  the user agent is expected to use the parsed value minus two as a pixel length for
  <a href=#presentational-hints id=the-hr-element-2:presentational-hints-4>presentational hints</a> for the <a id="the-hr-element-2:'height'" href=https://drafts.csswg.org/css2/#the-height-property data-x-internal="'height'">'height'</a> property on the element.</p>

  <p>The <code id=the-hr-element-2:attr-hr-width><a href=obsolete.html#attr-hr-width>width</a></code> attribute on an <code id=the-hr-element-2:the-hr-element-4><a href=grouping-content.html#the-hr-element>hr</a></code> element <a href=#maps-to-the-dimension-property id=the-hr-element-2:maps-to-the-dimension-property>maps
  to the dimension property</a> <a id="the-hr-element-2:'width'" href=https://drafts.csswg.org/css2/#the-width-property data-x-internal="'width'">'width'</a> on the element.</p>

  <p>When an <code id=the-hr-element-2:the-hr-element-5><a href=grouping-content.html#the-hr-element>hr</a></code> element has a <code id=the-hr-element-2:attr-hr-color-3><a href=obsolete.html#attr-hr-color>color</a></code> attribute, its
  value is expected to be parsed using the <a id=the-hr-element-2:rules-for-parsing-a-legacy-colour-value href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy color value</a>, and
  if that does not return failure, the user agent is expected to treat the attribute as a <a href=#presentational-hints id=the-hr-element-2:presentational-hints-5>presentational hint</a> setting the element's
  <a id="the-hr-element-2:'color'" href=https://drafts.csswg.org/css-color/#the-color-property data-x-internal="'color'">'color'</a> property to the resulting color.</p>



  <h4 id=the-fieldset-and-legend-elements><span class=secno>15.3.12</span> The <code id=the-fieldset-and-legend-elements:the-fieldset-element><a href=form-elements.html#the-fieldset-element>fieldset</a></code> and <code id=the-fieldset-and-legend-elements:the-legend-element><a href=form-elements.html#the-legend-element>legend</a></code> elements<a href=#the-fieldset-and-legend-elements class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>fieldset </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> block<c- p>;</c->
  <c- k>margin-inline</c-><c- p>:</c-> <c- m>2</c-><c- l>px</c-><c- p>;</c->
  <c- k>border</c-><c- p>:</c-> groove <c- m>2</c-><c- l>px</c-> ThreeDFace<c- p>;</c->
  <c- k>padding-block</c-><c- p>:</c-> <c- m>0.35</c-><c- l>em</c-> <c- m>0.625</c-><c- l>em</c-><c- p>;</c->
  <c- k>padding-inline</c-><c- p>:</c-> <c- m>0.75</c-><c- l>em</c-><c- p>;</c->
  <c- k>min-inline-size</c-><c- p>:</c-> min-content<c- p>;</c->
<c- p>}</c->

<c- f>legend </c-><c- p>{</c->
  <c- k>padding-inline</c-><c- p>:</c-> <c- m>2</c-><c- l>px</c-><c- p>;</c->
<c- p>}</c->

<c- f>legend[align=left i] </c-><c- p>{</c->
  <c- k>justify-self</c-><c- p>:</c-> left<c- p>;</c->
<c- p>}</c->

<c- f>legend[align=center i] </c-><c- p>{</c->
  <c- k>justify-self</c-><c- p>:</c-> center<c- p>;</c->
<c- p>}</c->

<c- f>legend[align=right i] </c-><c- p>{</c->
  <c- k>justify-self</c-><c- p>:</c-> right<c- p>;</c->
<c- p>}</c-></code></pre>

  <p>The <code id=the-fieldset-and-legend-elements:the-fieldset-element-2><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element, when it generates a <a id=the-fieldset-and-legend-elements:css-box href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS box</a>, is expected to act
  as follows:</p>

  <ul><li><p>The element is expected to establish a new <a id=the-fieldset-and-legend-elements:block-formatting-context href=https://drafts.csswg.org/css-display/#block-formatting-context data-x-internal=block-formatting-context>block formatting context</a>.<li>
    <p>The <a id="the-fieldset-and-legend-elements:'display'" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> property is expected to act as follows:</p>

    <ul><li><p>If the computed value of <a id="the-fieldset-and-legend-elements:'display'-2" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> is a value such that the <a id=the-fieldset-and-legend-elements:outer-display-type href=https://drafts.csswg.org/css-display/#outer-display-type data-x-internal=outer-display-type>outer
     display type</a> is 'inline', then behave as 'inline-block'.<li><p>Otherwise, behave as 'flow-root'.</ul>

    <p class=note>This does not change the computed value.</p>
   <li>
    <p>If the element's box has a child box that matches the conditions in the list below, then the
    first such child box is the 'fieldset' element's <dfn id=rendered-legend>rendered legend</dfn>:</p>

    <ul class=brief><li>The child is a <code id=the-fieldset-and-legend-elements:the-legend-element-2><a href=form-elements.html#the-legend-element>legend</a></code> element.<li>The child's used value of <a id="the-fieldset-and-legend-elements:'float'" href=https://drafts.csswg.org/css2/#float-position data-x-internal="'float'">'float'</a> is 'none'.<li>The child's used value of <a id="the-fieldset-and-legend-elements:'position'" href=https://drafts.csswg.org/css-position/#position-property data-x-internal="'position'">'position'</a> is not 'absolute' or 'fixed'.</ul>
   <li>
    <p>If the element has a <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend>rendered legend</a>, then the border is expected to not be
    painted behind the rectangle defined as follows, using the writing mode of the fieldset:</p>

    <ol><li><p>The block-start edge of the rectangle is the smaller of the block-start edge of the
     <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-2>rendered legend</a>'s margin rectangle at its static position (ignoring transforms),
     and the block-start outer edge of the <code id=the-fieldset-and-legend-elements:the-fieldset-element-3><a href=form-elements.html#the-fieldset-element>fieldset</a></code>'s border.<li><p>The block-end edge of the rectangle is the larger of the block-end edge of the
     <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-3>rendered legend</a>'s margin rectangle at its static position (ignoring transforms),
     and the block-end outer edge of the <code id=the-fieldset-and-legend-elements:the-fieldset-element-4><a href=form-elements.html#the-fieldset-element>fieldset</a></code>'s border.<li><p>The inline-start edge of the rectangle is the smaller of the inline-start edge of the
     <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-4>rendered legend</a>'s border rectangle at its static position (ignoring transforms),
     and the inline-start outer edge of the <code id=the-fieldset-and-legend-elements:the-fieldset-element-5><a href=form-elements.html#the-fieldset-element>fieldset</a></code>'s border.<li><p>The inline-end edge of the rectangle is the larger of the inline-end edge of the
     <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-5>rendered legend</a>'s border rectangle at its static position (ignoring transforms),
     and the inline-end outer edge of the <code id=the-fieldset-and-legend-elements:the-fieldset-element-6><a href=form-elements.html#the-fieldset-element>fieldset</a></code>'s border.</ol>
   <li><p>The space allocated for the element's border on the block-start side is expected to be
   the element's <a id="the-fieldset-and-legend-elements:'border-block-start-width'" href=https://drafts.csswg.org/css-logical/#propdef-border-block-start-width data-x-internal="'border-block-start-width'">'border-block-start-width'</a> or the <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-6>rendered legend</a>'s
   margin box size in the <code id=the-fieldset-and-legend-elements:the-fieldset-element-7><a href=form-elements.html#the-fieldset-element>fieldset</a></code>'s block-flow direction, whichever is
   greater.<li><p>For the purpose of calculating the used <a id="the-fieldset-and-legend-elements:'block-size'" href=https://drafts.csswg.org/css-logical/#propdef-block-size data-x-internal="'block-size'">'block-size'</a>, if the computed
   <a id="the-fieldset-and-legend-elements:'block-size'-2" href=https://drafts.csswg.org/css-logical/#propdef-block-size data-x-internal="'block-size'">'block-size'</a> is not 'auto', the space allocated for the <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-7>rendered
   legend</a>'s margin box that spills out past the border, if any, is expected to be
   subtracted from the <a id="the-fieldset-and-legend-elements:'block-size'-3" href=https://drafts.csswg.org/css-logical/#propdef-block-size data-x-internal="'block-size'">'block-size'</a>. If the content box's block-size would be
   negative, then let the content box's block-size be 0 instead.<li><p>If the element has a <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-8>rendered legend</a>, then that element is expected to be
   the first child box.<li><p>The <a href=#anonymous-fieldset-content-box id=the-fieldset-and-legend-elements:anonymous-fieldset-content-box>anonymous fieldset content box</a> is expected to appear after the
   <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-9>rendered legend</a> and is expected to contain the content (including the '::before'
   and '::after' pseudo-elements) of the <code id=the-fieldset-and-legend-elements:the-fieldset-element-8><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element except for the
   <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-10>rendered legend</a>, if there is one.<li><p>The used value of the <a id="the-fieldset-and-legend-elements:'padding-top'" href=https://drafts.csswg.org/css-box/#propdef-padding-top data-x-internal="'padding-top'">'padding-top'</a>, <a id="the-fieldset-and-legend-elements:'padding-right'" href=https://drafts.csswg.org/css-box/#propdef-padding-right data-x-internal="'padding-right'">'padding-right'</a>,
   <a id="the-fieldset-and-legend-elements:'padding-bottom'" href=https://drafts.csswg.org/css-box/#propdef-padding-bottom data-x-internal="'padding-bottom'">'padding-bottom'</a>, and <a id="the-fieldset-and-legend-elements:'padding-left'" href=https://drafts.csswg.org/css-box/#propdef-padding-left data-x-internal="'padding-left'">'padding-left'</a> properties are expected to be
   zero.<li><p>For the purpose of calculating the min-content inline size, use the greater of the
   min-content inline size of the <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-11>rendered legend</a> and the min-content inline size of
   the <a href=#anonymous-fieldset-content-box id=the-fieldset-and-legend-elements:anonymous-fieldset-content-box-2>anonymous fieldset content box</a>.<li><p>For the purpose of calculating the max-content inline size, use the greater of the
   max-content inline size of the <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-12>rendered legend</a> and the max-content inline size of
   the <a href=#anonymous-fieldset-content-box id=the-fieldset-and-legend-elements:anonymous-fieldset-content-box-3>anonymous fieldset content box</a>.</ul>

  <p>A <code id=the-fieldset-and-legend-elements:the-fieldset-element-9><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element's <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-13>rendered legend</a>, if any, is expected to act as
  follows:</p>

  <ul><li><p>The element is expected to establish a new <a id=the-fieldset-and-legend-elements:formatting-context href=https://drafts.csswg.org/css-display/#formatting-context data-x-internal=formatting-context>formatting context</a> for its
   contents. The type of this <a id=the-fieldset-and-legend-elements:formatting-context-2 href=https://drafts.csswg.org/css-display/#formatting-context data-x-internal=formatting-context>formatting context</a> is determined by its
   <a id="the-fieldset-and-legend-elements:'display'-3" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> value, as usual.<li>
    <p>The <a id="the-fieldset-and-legend-elements:'display'-4" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> property is expected to behave as if its computed value was
    blockified.</p>

    <p class=note>This does not change the computed value.</p>
   <li><p>If the <a id=the-fieldset-and-legend-elements:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of <a id="the-fieldset-and-legend-elements:'inline-size'" href=https://drafts.csswg.org/css-logical/#propdef-inline-size data-x-internal="'inline-size'">'inline-size'</a> is 'auto', then the
   <a id=the-fieldset-and-legend-elements:used-value href=https://drafts.csswg.org/css-cascade/#used-value data-x-internal=used-value>used value</a> is the <a id=the-fieldset-and-legend-elements:fit-content-inline-size href=https://drafts.csswg.org/css-sizing/#fit-content-inline-size data-x-internal=fit-content-inline-size>fit-content inline size</a>.<li><p>The element is expected to be positioned in the inline direction as is normal for
   blocks (e.g., taking into account margins and the <a id="the-fieldset-and-legend-elements:'justify-self'" href=https://drafts.csswg.org/css-align/#propdef-justify-self data-x-internal="'justify-self'">'justify-self'</a>
   property).<li>
    <p>The element's box is expected to be constrained in the inline direction by the inline
    content size of the <code id=the-fieldset-and-legend-elements:the-fieldset-element-10><a href=form-elements.html#the-fieldset-element>fieldset</a></code> as if it had used its computed inline padding.</p>

    <div class=example>
     <p>For example, if the <code id=the-fieldset-and-legend-elements:the-fieldset-element-11><a href=form-elements.html#the-fieldset-element>fieldset</a></code> has a specified padding of 50px, then the
     <a href=#rendered-legend id=the-fieldset-and-legend-elements:rendered-legend-14>rendered legend</a> will be positioned 50px in from the <code id=the-fieldset-and-legend-elements:the-fieldset-element-12><a href=form-elements.html#the-fieldset-element>fieldset</a></code>'s
     border. The padding will further apply to the <a href=#anonymous-fieldset-content-box id=the-fieldset-and-legend-elements:anonymous-fieldset-content-box-4>anonymous fieldset content box</a>
     instead of the <code id=the-fieldset-and-legend-elements:the-fieldset-element-13><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element itself.</p>
    </div>
   <li><p>The element is expected to be positioned in the block-flow direction such that its border
   box is centered over the border on the block-start side of the <code id=the-fieldset-and-legend-elements:the-fieldset-element-14><a href=form-elements.html#the-fieldset-element>fieldset</a></code>
   element.</ul>


  <p>A <code id=the-fieldset-and-legend-elements:the-fieldset-element-15><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element's <dfn id=anonymous-fieldset-content-box>anonymous fieldset content box</dfn> is expected to
  act as follows:</p>

  <ul><li>
    <p>The <a id="the-fieldset-and-legend-elements:'display'-5" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> property is expected to act as follows:</p>

    <ul><li><p>If the computed value of <a id="the-fieldset-and-legend-elements:'display'-6" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> on the <code id=the-fieldset-and-legend-elements:the-fieldset-element-16><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element
     is 'grid' or 'inline-grid', then set the used value to 'grid'.<li><p>If the computed value of <a id="the-fieldset-and-legend-elements:'display'-7" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> on the <code id=the-fieldset-and-legend-elements:the-fieldset-element-17><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element
     is 'flex' or 'inline-flex', then set the used value to 'flex'.<li><p>Otherwise, set the used value to 'flow-root'.</ul>
   <li>
    <p>The following properties are expected to inherit from the <code id=the-fieldset-and-legend-elements:the-fieldset-element-18><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element:</p>

    <ul class=brief><li><a id="the-fieldset-and-legend-elements:'align-content'" href=https://drafts.csswg.org/css-align/#propdef-align-content data-x-internal="'align-content'">'align-content'</a><li><a id="the-fieldset-and-legend-elements:'align-items'" href=https://drafts.csswg.org/css-align/#propdef-align-items data-x-internal="'align-items'">'align-items'</a><li><a id="the-fieldset-and-legend-elements:'border-radius'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-radius data-x-internal="'border-radius'">'border-radius'</a><li><a id="the-fieldset-and-legend-elements:'column-count'" href=https://drafts.csswg.org/css-multicol/#propdef-column-count data-x-internal="'column-count'">'column-count'</a><li><a id="the-fieldset-and-legend-elements:'column-fill'" href=https://drafts.csswg.org/css-multicol/#propdef-column-fill data-x-internal="'column-fill'">'column-fill'</a><li><a id="the-fieldset-and-legend-elements:'column-gap'" href=https://drafts.csswg.org/css-multicol/#propdef-column-gap data-x-internal="'column-gap'">'column-gap'</a><li><a id="the-fieldset-and-legend-elements:'column-rule'" href=https://drafts.csswg.org/css-multicol/#propdef-column-rule data-x-internal="'column-rule'">'column-rule'</a><li><a id="the-fieldset-and-legend-elements:'column-width'" href=https://drafts.csswg.org/css-multicol/#propdef-column-width data-x-internal="'column-width'">'column-width'</a><li><a id="the-fieldset-and-legend-elements:'flex-direction'" href=https://drafts.csswg.org/css-flexbox/#propdef-flex-direction data-x-internal="'flex-direction'">'flex-direction'</a><li><a id="the-fieldset-and-legend-elements:'flex-wrap'" href=https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap data-x-internal="'flex-wrap'">'flex-wrap'</a><li><a id="the-fieldset-and-legend-elements:'grid-auto-columns'" href=https://drafts.csswg.org/css-grid/#propdef-grid-auto-columns data-x-internal="'grid-auto-columns'">'grid-auto-columns'</a><li><a id="the-fieldset-and-legend-elements:'grid-auto-flow'" href=https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow data-x-internal="'grid-auto-flow'">'grid-auto-flow'</a><li><a id="the-fieldset-and-legend-elements:'grid-auto-rows'" href=https://drafts.csswg.org/css-grid/#propdef-grid-auto-rows data-x-internal="'grid-auto-rows'">'grid-auto-rows'</a><li><a id="the-fieldset-and-legend-elements:'grid-column-gap'" href=https://drafts.csswg.org/css-grid/#propdef-grid-column-gap data-x-internal="'grid-column-gap'">'grid-column-gap'</a><li><a id="the-fieldset-and-legend-elements:'grid-row-gap'" href=https://drafts.csswg.org/css-grid/#propdef-grid-row-gap data-x-internal="'grid-row-gap'">'grid-row-gap'</a><li><a id="the-fieldset-and-legend-elements:'grid-template-areas'" href=https://drafts.csswg.org/css-grid/#propdef-grid-template-areas data-x-internal="'grid-template-areas'">'grid-template-areas'</a><li><a id="the-fieldset-and-legend-elements:'grid-template-columns'" href=https://drafts.csswg.org/css-grid/#propdef-grid-template-columns data-x-internal="'grid-template-columns'">'grid-template-columns'</a><li><a id="the-fieldset-and-legend-elements:'grid-template-rows'" href=https://drafts.csswg.org/css-grid/#propdef-grid-template-rows data-x-internal="'grid-template-rows'">'grid-template-rows'</a><li><a id="the-fieldset-and-legend-elements:'justify-content'" href=https://drafts.csswg.org/css-align/#propdef-propdef-justify-content data-x-internal="'justify-content'">'justify-content'</a><li><a id="the-fieldset-and-legend-elements:'justify-items'" href=https://drafts.csswg.org/css-align/#propdef-propdef-justify-items data-x-internal="'justify-items'">'justify-items'</a><li><a id="the-fieldset-and-legend-elements:'overflow'" href=https://drafts.csswg.org/css-overflow/#propdef-overflow data-x-internal="'overflow'">'overflow'</a><li><a id="the-fieldset-and-legend-elements:'padding-bottom'-2" href=https://drafts.csswg.org/css-box/#propdef-padding-bottom data-x-internal="'padding-bottom'">'padding-bottom'</a><li><a id="the-fieldset-and-legend-elements:'padding-left'-2" href=https://drafts.csswg.org/css-box/#propdef-padding-left data-x-internal="'padding-left'">'padding-left'</a><li><a id="the-fieldset-and-legend-elements:'padding-right'-2" href=https://drafts.csswg.org/css-box/#propdef-padding-right data-x-internal="'padding-right'">'padding-right'</a><li><a id="the-fieldset-and-legend-elements:'padding-top'-2" href=https://drafts.csswg.org/css-box/#propdef-padding-top data-x-internal="'padding-top'">'padding-top'</a><li><a id="the-fieldset-and-legend-elements:'text-overflow'" href=https://drafts.csswg.org/css-overflow/#propdef-text-overflow data-x-internal="'text-overflow'">'text-overflow'</a><li><a id="the-fieldset-and-legend-elements:'unicode-bidi'" href=https://drafts.csswg.org/css-writing-modes/#unicode-bidi data-x-internal="'unicode-bidi'">'unicode-bidi'</a></ul>
   <li><p>The <a id="the-fieldset-and-legend-elements:'block-size'-4" href=https://drafts.csswg.org/css-logical/#propdef-block-size data-x-internal="'block-size'">'block-size'</a> property is expected to be set to '100%'.<li><p>For the purpose of calculating percentage padding, act as if the padding was calculated
   for the <code id=the-fieldset-and-legend-elements:the-fieldset-element-19><a href=form-elements.html#the-fieldset-element>fieldset</a></code> element.</ul>

  <div id=fieldset-layout-model class=note><a href=#fieldset-layout-model class=self-link></a>
   <figure>
    <svg width=480 role=img viewBox="0 0 400 270" height=324 aria-label="Fieldset layout
    model">

     <defs>
      <marker markerHeight=4 id=arrow-red orient=auto markerWidth=5 refX=0.1 refY=2>
       <path fill=red d="M0,0 V4 L5,2 Z"></path>
      </marker>
      <marker markerHeight=4 id=arrow-blue orient=auto markerWidth=5 refX=0.1 refY=2>
       <path fill=blue d="M0,0 V4 L5,2 Z"></path>
      </marker>
     </defs>

     
     <rect width=304 stroke-dasharray=6 stroke-width=1 fill=none x=48 stroke=black y=48 height=176></rect>

     <line y2=20 stroke-width=2 marker-end=url(#arrow-blue) stroke=blue x1=200 x2=200 y1=48></line>
     <line y2=136 stroke-width=2 marker-end=url(#arrow-blue) stroke=blue x1=48 x2=20 y1=136></line>
     <line y2=136 stroke-width=2 marker-end=url(#arrow-blue) stroke=blue x1=352 x2=380 y1=136></line>
     <line y2=250 stroke-width=2 marker-end=url(#arrow-blue) stroke=blue x1=200 x2=200 y1=224></line>
     <text font-size=12 font-style=normal font-family=sans-serif fill=blue x=210 y=35>fieldset's margin</text>

     
     <rect width=300 stroke-width=2 fill=white stroke=blue x=50 y=105 height=116.5></rect>

     
     <rect width=85 stroke-width=2 fill=white stroke=red x=100 y=75 height=60></rect>
     <text font-style=normal font-family=serif fill=red x=120 y=105 dominant-baseline=central>legend</text>

     
     <rect width=65 stroke-width=18 fill=none stroke=#eee x=110 y=85 height=40></rect>
     <text font-size=12 font-style=normal font-family=sans-serif fill=gray x=133 y=88>padding</text>

     <line y2=90 stroke-width=2 marker-end=url(#arrow-red) stroke=red x1=185 x2=325 y1=90></line>
     <text font-size=12 font-style=normal font-family=sans-serif fill=red x=210 y=85>legend's margin</text>

     <line y2=90 stroke-width=2 marker-end=url(#arrow-red) stroke=red x1=100 x2=75 y1=90></line>
     <line y2=60 stroke-width=2 marker-end=url(#arrow-red) stroke=red x1=143 x2=143 y1=75></line>
     <line y2=150 stroke-width=2 marker-end=url(#arrow-red) stroke=red x1=143 x2=143 y1=135></line>

     
     <rect width=280 stroke-width=18 fill=none stroke=#eee x=60 y=171 height=40></rect>
     <text font-size=12 font-style=normal font-family=sans-serif fill=gray x=297 y=174>padding</text>

     
     <rect width=296 stroke-dasharray=6 stroke-width=1 fill=none x=52 stroke=black y=161 height=58></rect>
     <text font-style=normal font-family=sans-serif font-size=12 x=170 y=156>anonymous
     fieldset content box</text>
     <text font-style=normal font-family=serif fill=blue x=70 y=191 dominant-baseline=central>content</text>

    </svg>

    <figcaption>The legend is rendered over the top border, and the top border area reserves
    vertical space for the legend. The fieldset's top margin starts at the top margin edge of the
    legend. The legend's horizontal margins, or the <a id="the-fieldset-and-legend-elements:'justify-self'-2" href=https://drafts.csswg.org/css-align/#propdef-justify-self data-x-internal="'justify-self'">'justify-self'</a> property, gives
    its horizontal position. The <a href=#anonymous-fieldset-content-box id=the-fieldset-and-legend-elements:anonymous-fieldset-content-box-5>anonymous fieldset content box</a> appears below the
    legend.</figcaption>
   </figure>
  </div>


  <h3 id=replaced-elements><span class=secno>15.4</span> Replaced elements<a href=#replaced-elements class=self-link></a></h3>

  <p class=note>The following elements can be <a href=https://drafts.csswg.org/css-display/#replaced-element id=replaced-elements:replaced-element data-x-internal=replaced-element>replaced
  elements</a>: <code id=replaced-elements:the-audio-element><a href=media.html#the-audio-element>audio</a></code>, <code id=replaced-elements:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code>, <code id=replaced-elements:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code>, <code id=replaced-elements:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>,
  <code id=replaced-elements:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, <code id=replaced-elements:the-input-element><a href=input.html#the-input-element>input</a></code>, <code id=replaced-elements:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code>, and <code id=replaced-elements:the-video-element><a href=media.html#the-video-element>video</a></code>.</p>


  <h4 id=embedded-content-rendering-rules><span class=secno>15.4.1</span> Embedded content<a href=#embedded-content-rendering-rules class=self-link></a></h4>

  <p>The <code id=embedded-content-rendering-rules:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code>, <code id=embedded-content-rendering-rules:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>, and <code id=embedded-content-rendering-rules:the-video-element><a href=media.html#the-video-element>video</a></code> elements are expected to be
  treated as <a href=https://drafts.csswg.org/css-display/#replaced-element id=embedded-content-rendering-rules:replaced-element data-x-internal=replaced-element>replaced elements</a>.</p>

  <p>A <code id=embedded-content-rendering-rules:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code> element that <a id=embedded-content-rendering-rules:represents href=dom.html#represents>represents</a> <a id=embedded-content-rendering-rules:embedded-content-category href=dom.html#embedded-content-category>embedded content</a> is
  expected to be treated as a <a id=embedded-content-rendering-rules:replaced-element-2 href=https://drafts.csswg.org/css-display/#replaced-element data-x-internal=replaced-element>replaced element</a>; the contents of such elements are the
  element's bitmap, if any, or else a <a id=embedded-content-rendering-rules:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> bitmap with the same
  <a id=embedded-content-rendering-rules:natural-dimensions href=https://drafts.csswg.org/css-images/#natural-dimensions data-x-internal=natural-dimensions>natural dimensions</a> as the element. Other <code id=embedded-content-rendering-rules:the-canvas-element-2><a href=canvas.html#the-canvas-element>canvas</a></code> elements are expected
  to be treated as ordinary elements in the rendering model.</p>

  <p>An <code id=embedded-content-rendering-rules:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code> element that <a id=embedded-content-rendering-rules:represents-2 href=dom.html#represents>represents</a> an image, plugin, or its
  <a id=embedded-content-rendering-rules:content-navigable href=document-sequences.html#content-navigable>content navigable</a> is expected to be treated as a <a id=embedded-content-rendering-rules:replaced-element-3 href=https://drafts.csswg.org/css-display/#replaced-element data-x-internal=replaced-element>replaced element</a>.
  Other <code id=embedded-content-rendering-rules:the-object-element-2><a href=iframe-embed-object.html#the-object-element>object</a></code> elements are expected to be treated as ordinary elements in the
  rendering model.</p>

  <p>The <code id=embedded-content-rendering-rules:the-audio-element><a href=media.html#the-audio-element>audio</a></code> element, when it is <a href=media.html#expose-a-user-interface-to-the-user id=embedded-content-rendering-rules:expose-a-user-interface-to-the-user>exposing a user interface</a>, is expected to be treated as a
  <a id=embedded-content-rendering-rules:replaced-element-4 href=https://drafts.csswg.org/css-display/#replaced-element data-x-internal=replaced-element>replaced element</a> about one line high, as wide as is necessary to expose the user
  agent's user interface features. When an <code id=embedded-content-rendering-rules:the-audio-element-2><a href=media.html#the-audio-element>audio</a></code> element is not <a href=media.html#expose-a-user-interface-to-the-user id=embedded-content-rendering-rules:expose-a-user-interface-to-the-user-2>exposing a user interface</a>, the user agent is expected to force
  its <a id="embedded-content-rendering-rules:'display'" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> property to compute to 'none', irrespective of CSS rules.</p>

  <p>Whether a <code id=embedded-content-rendering-rules:the-video-element-2><a href=media.html#the-video-element>video</a></code> element is <a href=media.html#expose-a-user-interface-to-the-user id=embedded-content-rendering-rules:expose-a-user-interface-to-the-user-3>exposing a user interface</a> is not expected to affect the size of the rendering;
  controls are expected to be overlaid above the page content without causing any layout changes,
  and are expected to disappear when the user does not need them.</p>

  <p>When a <code id=embedded-content-rendering-rules:the-video-element-3><a href=media.html#the-video-element>video</a></code> element represents a poster frame or frame of video, the poster frame
  or frame of video is expected to be rendered at the largest size that maintains the aspect ratio
  of that poster frame or frame of video without being taller or wider than the <code id=embedded-content-rendering-rules:the-video-element-4><a href=media.html#the-video-element>video</a></code>
  element itself, and is expected to be centered in the <code id=embedded-content-rendering-rules:the-video-element-5><a href=media.html#the-video-element>video</a></code> element.</p>

  <p>Any subtitles or captions are expected to be overlaid directly on top of their
  <code id=embedded-content-rendering-rules:the-video-element-6><a href=media.html#the-video-element>video</a></code> element, as defined by the relevant rendering rules; for WebVTT, those are the
  <a id=embedded-content-rendering-rules:rules-for-updating-the-display-of-webvtt-text-tracks href=https://w3c.github.io/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks data-x-internal=rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text tracks</a>. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>When the user agent starts <a href=media.html#expose-a-user-interface-to-the-user id=embedded-content-rendering-rules:expose-a-user-interface-to-the-user-4>exposing a user
  interface</a> for a <code id=embedded-content-rendering-rules:the-video-element-7><a href=media.html#the-video-element>video</a></code> element, the user agent should run the <a id=embedded-content-rendering-rules:rules-for-updating-the-text-track-rendering href=media.html#rules-for-updating-the-text-track-rendering>rules for
  updating the text track rendering</a> of each of the <a href=media.html#text-track id=embedded-content-rendering-rules:text-track>text
  tracks</a> in the <code id=embedded-content-rendering-rules:the-video-element-8><a href=media.html#the-video-element>video</a></code> element's <a id=embedded-content-rendering-rules:list-of-text-tracks href=media.html#list-of-text-tracks>list of text tracks</a> that are <a href=media.html#text-track-showing id=embedded-content-rendering-rules:text-track-showing>showing</a> and whose <a id=embedded-content-rendering-rules:text-track-kind href=media.html#text-track-kind>text track kind</a> is one of <code id=embedded-content-rendering-rules:dom-texttrack-kind-subtitles><a href=media.html#dom-texttrack-kind-subtitles>subtitles</a></code> or <code id=embedded-content-rendering-rules:dom-texttrack-kind-captions><a href=media.html#dom-texttrack-kind-captions>captions</a></code> (e.g., for <a href=media.html#text-track id=embedded-content-rendering-rules:text-track-2>text
  tracks</a> based on WebVTT, the <a id=embedded-content-rendering-rules:rules-for-updating-the-display-of-webvtt-text-tracks-2 href=https://w3c.github.io/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks data-x-internal=rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text
  tracks</a>). <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p class=note>Resizing <code id=embedded-content-rendering-rules:the-video-element-9><a href=media.html#the-video-element>video</a></code> and <code id=embedded-content-rendering-rules:the-canvas-element-3><a href=canvas.html#the-canvas-element>canvas</a></code> elements does not interrupt
  video playback or clear the canvas.</p>

  <hr>

  <p>The following CSS rules are expected to apply:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>iframe </c-><c- p>{</c-> <c- k>border</c-><c- p>:</c-> <c- m>2</c-><c- l>px</c-> inset<c- p>;</c-> <c- p>}</c->
<span id='video-object-fit'><c- f>video </c-><c- p>{</c-> <c- k>object-fit</c-><c- p>:</c-> contain<c- p>;</c-> <c- p>}</c-></span></code></pre>


  <h4 id=images-3><span class=secno>15.4.2</span> Images<a href=#images-3 class=self-link></a></h4>

  <p>User agents are expected to render <code id=images-3:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> elements and <code id=images-3:the-input-element><a href=input.html#the-input-element>input</a></code> elements
  whose <code id=images-3:attr-input-type><a href=input.html#attr-input-type>type</a></code> attributes are in the <a href="input.html#image-button-state-(type=image)" id="images-3:image-button-state-(type=image)">Image Button</a> state, according to the first applicable rules
  from the following list:</p>

  <dl class=switch><dt>If the element <a id=images-3:represents href=dom.html#represents>represents</a> an image<dd>The user agent is expected to treat the element as a <a id=images-3:replaced-element href=https://drafts.csswg.org/css-display/#replaced-element data-x-internal=replaced-element>replaced element</a> and
   render the image according to the rules for doing so defined in CSS.<dt>

    If the element does not <a href=dom.html#represents id=images-3:represents-2>represent</a> an image and either:

    <ul><li>the user agent has reason to believe that the image will become <i id=images-3:img-available><a href=images.html#img-available>available</a></i> and be rendered in due
     course, or

     <li>the element has no <code>alt</code> attribute, or

     <li>the <code id=images-3:document><a href=dom.html#document>Document</a></code> is in <a id=images-3:quirks-mode href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a>, and the element already has
     <a id=images-3:natural-dimensions href=https://drafts.csswg.org/css-images/#natural-dimensions data-x-internal=natural-dimensions>natural dimensions</a> (e.g., from the <a id=images-3:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a> or CSS
     rules)
    </ul>

   <dd>The user agent is expected to treat the element as a <a id=images-3:replaced-element-2 href=https://drafts.csswg.org/css-display/#replaced-element data-x-internal=replaced-element>replaced element</a> whose
   content is the text that the element represents, if any, optionally alongside an icon indicating
   that the image is being obtained (if applicable). For <code id=images-3:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements, the element
   is expected to appear button-like to indicate that the element is a <a href=forms.html#concept-button id=images-3:concept-button>button</a>.<dt>If the element is an <code id=images-3:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element that <a id=images-3:represents-3 href=dom.html#represents>represents</a> some text and the
   user agent does not expect this to change<dd>The user agent is expected to treat the element as a non-replaced phrasing element whose
   content is the text, optionally with an icon indicating that an image is missing, so that the
   user can request the image be displayed or investigate why it is not rendering. In non-graphical
   contexts, such an icon should be omitted.<dt>If the element is an <code id=images-3:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code> element that <a id=images-3:represents-4 href=dom.html#represents>represents</a> nothing and the
   user agent does not expect this to change<dd>The user agent is expected to treat the element as a <a id=images-3:replaced-element-3 href=https://drafts.csswg.org/css-display/#replaced-element data-x-internal=replaced-element>replaced element</a> whose
   <a id=images-3:natural-dimensions-2 href=https://drafts.csswg.org/css-images/#natural-dimensions data-x-internal=natural-dimensions>natural dimensions</a> are 0. (In the absence of further styles, this will cause the
   element to essentially not be rendered.)<dt>If the element is an <code id=images-3:the-input-element-3><a href=input.html#the-input-element>input</a></code> element that does not <a href=dom.html#represents id=images-3:represents-5>represent</a> an image and the user agent does not expect this to change<dd>The user agent is expected to treat the element as a <a id=images-3:replaced-element-4 href=https://drafts.csswg.org/css-display/#replaced-element data-x-internal=replaced-element>replaced element</a>
   consisting of a button whose content is the element's alternative text. The <a id=images-3:natural-dimensions-3 href=https://drafts.csswg.org/css-images/#natural-dimensions data-x-internal=natural-dimensions>natural
   dimensions</a> of the button are expected to be about one line in height and whatever width
   is necessary to render the text on one line.</dl>

  <p>The icons mentioned above are expected to be relatively small so as not to disrupt most text
  but be easily clickable. In a visual environment, for instance, icons could be 16 pixels by 16
  pixels square, or 1em by 1em if the images are scalable. In an audio environment, the icon could
  be a short bleep. The icons are intended to indicate to the user that they can be used to get to
  whatever options the UA provides for images, and, where appropriate, are expected to provide
  access to the context menu that would have come up if the user interacted with the actual
  image.</p>

  <hr>

  <p>All animated images with the same <a id=images-3:absolute-url href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a> and the same image data are
  expected to be rendered synchronized to the same timeline as a group, with the timeline starting
  at the time of the least recent addition to the group.</p>

  <p class=note>In other words, when a second image with the same <a id=images-3:absolute-url-2 href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a> and
  animated image data is inserted into a document, it jumps to the point in the animation cycle that
  is currently being displayed by the first image.</p>

  <p>When a user agent is to <dfn id=restart-the-animation>restart the animation</dfn> for an <code id=images-3:the-img-element-4><a href=embedded-content.html#the-img-element>img</a></code> element
  showing an animated image, all animated images with the same <a id=images-3:absolute-url-3 href=https://url.spec.whatwg.org/#syntax-url-absolute data-x-internal=absolute-url>absolute URL</a> and the
  same image data in that <code id=images-3:the-img-element-5><a href=embedded-content.html#the-img-element>img</a></code> element's <a id=images-3:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> are expected to restart
  their animation from the beginning.</p>

  <hr>

  <p>The following CSS rules are expected to apply:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<span id='img-contain-size'><c- f>img:is([sizes=&quot;auto&quot; i], [sizes^=&quot;auto,&quot; i]) </c-><c- p>{</c->
  <c- k>contain</c-><c- p>:</c-> size !important;
  contain-intrinsic-size: 300px 150px;
}</span></code></pre>

  <p>The following CSS rules are expected to apply when the <code id=images-3:document-2><a href=dom.html#document>Document</a></code> is in <a id=images-3:quirks-mode-2 href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks
  mode</a>:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>img[align=left i] </c-><c- p>{</c-> <c- k>margin-right</c-><c- p>:</c-> <c- m>3</c-><c- l>px</c-><c- p>;</c-> <c- p>}</c->
<c- f>img[align=right i] </c-><c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> <c- m>3</c-><c- l>px</c-><c- p>;</c-> <c- p>}</c-></code></pre>

  


  

  <h4 id=attributes-for-embedded-content-and-images><span class=secno>15.4.3</span> Attributes for embedded content and images<a href=#attributes-for-embedded-content-and-images class=self-link></a></h4>

  <p>The following CSS rules are expected to apply as <a href=#presentational-hints id=attributes-for-embedded-content-and-images:presentational-hints>presentational hints</a>:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>embed[align=left i], iframe[align=left i], img[align=left i],</c->
<c- f>input[type=image i][align=left i], object[align=left i] </c-><c- p>{</c->
  <c- k>float</c-><c- p>:</c-> left<c- p>;</c->
<c- p>}</c->

<c- f>embed[align=right i], iframe[align=right i], img[align=right i],</c->
<c- f>input[type=image i][align=right i], object[align=right i] </c-><c- p>{</c->
  <c- k>float</c-><c- p>:</c-> right<c- p>;</c->
<c- p>}</c->

<c- f>embed[align=top i], iframe[align=top i], img[align=top i],</c->
<c- f>input[type=image i][align=top i], object[align=top i] </c-><c- p>{</c->
  <c- k>vertical-align</c-><c- p>:</c-> top<c- p>;</c->
<c- p>}</c->

<c- f>embed[align=baseline i], iframe[align=baseline i], img[align=baseline i],</c->
<c- f>input[type=image i][align=baseline i], object[align=baseline i] </c-><c- p>{</c->
  <c- k>vertical-align</c-><c- p>:</c-> baseline<c- p>;</c->
<c- p>}</c->

<c- f>embed[align=texttop i], iframe[align=texttop i], img[align=texttop i],</c->
<c- f>input[type=image i][align=texttop i], object[align=texttop i] </c-><c- p>{</c->
  <c- k>vertical-align</c-><c- p>:</c-> text-top<c- p>;</c->
<c- p>}</c->

<c- f>embed[align=absmiddle i], iframe[align=absmiddle i], img[align=absmiddle i],</c->
<c- f>input[type=image i][align=absmiddle i], object[align=absmiddle i],</c->
<c- f>embed[align=abscenter i], iframe[align=abscenter i], img[align=abscenter i],</c->
<c- f>input[type=image i][align=abscenter i], object[align=abscenter i] </c-><c- p>{</c->
  <c- k>vertical-align</c-><c- p>:</c-> middle<c- p>;</c->
<c- p>}</c->

<c- f>embed[align=bottom i], iframe[align=bottom i], img[align=bottom i],</c->
<c- f>input[type=image i][align=bottom i], object[align=bottom i] </c-><c- p>{</c->
  <c- k>vertical-align</c-><c- p>:</c-> bottom<c- p>;</c->
<c- p>}</c-></code></pre>

  <p>When an <code id=attributes-for-embedded-content-and-images:the-embed-element><a href=iframe-embed-object.html#the-embed-element>embed</a></code>, <code id=attributes-for-embedded-content-and-images:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>, <code id=attributes-for-embedded-content-and-images:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, or <code id=attributes-for-embedded-content-and-images:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code>
  element, or an <code id=attributes-for-embedded-content-and-images:the-input-element><a href=input.html#the-input-element>input</a></code> element whose <code id=attributes-for-embedded-content-and-images:attr-input-type><a href=input.html#attr-input-type>type</a></code>
  attribute is in the <a href="input.html#image-button-state-(type=image)" id="attributes-for-embedded-content-and-images:image-button-state-(type=image)">Image Button</a> state, has an <code>align</code> attribute whose value is an <a id=attributes-for-embedded-content-and-images:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
  the string "<code>center</code>" or the string "<code>middle</code>", the user
  agent is expected to act as if the element's <a id="attributes-for-embedded-content-and-images:'vertical-align'" href=https://drafts.csswg.org/css2/#propdef-vertical-align data-x-internal="'vertical-align'">'vertical-align'</a> property was set to a
  value that aligns the vertical middle of the element with the parent element's baseline.</p>

  <p>The <code>hspace</code> attribute of <code id=attributes-for-embedded-content-and-images:the-embed-element-2><a href=iframe-embed-object.html#the-embed-element>embed</a></code>,
  <code id=attributes-for-embedded-content-and-images:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code>, or <code id=attributes-for-embedded-content-and-images:the-object-element-2><a href=iframe-embed-object.html#the-object-element>object</a></code> elements, and <code id=attributes-for-embedded-content-and-images:the-input-element-2><a href=input.html#the-input-element>input</a></code> elements with a <code id=attributes-for-embedded-content-and-images:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#image-button-state-(type=image)" id="attributes-for-embedded-content-and-images:image-button-state-(type=image)-2">Image
  Button</a> state, <a href=#maps-to-the-dimension-property id=attributes-for-embedded-content-and-images:maps-to-the-dimension-property>maps to the dimension
  properties</a> <a id="attributes-for-embedded-content-and-images:'margin-left'" href=https://drafts.csswg.org/css-box/#propdef-margin-left data-x-internal="'margin-left'">'margin-left'</a> and <a id="attributes-for-embedded-content-and-images:'margin-right'" href=https://drafts.csswg.org/css-box/#propdef-margin-right data-x-internal="'margin-right'">'margin-right'</a> on the element.</p>

  <p>The <code>vspace</code> attribute of <code id=attributes-for-embedded-content-and-images:the-embed-element-3><a href=iframe-embed-object.html#the-embed-element>embed</a></code>,
  <code id=attributes-for-embedded-content-and-images:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code>, or <code id=attributes-for-embedded-content-and-images:the-object-element-3><a href=iframe-embed-object.html#the-object-element>object</a></code> elements, and <code id=attributes-for-embedded-content-and-images:the-input-element-3><a href=input.html#the-input-element>input</a></code> elements with a <code id=attributes-for-embedded-content-and-images:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#image-button-state-(type=image)" id="attributes-for-embedded-content-and-images:image-button-state-(type=image)-3">Image
  Button</a> state, <a href=#maps-to-the-dimension-property id=attributes-for-embedded-content-and-images:maps-to-the-dimension-property-2>maps to the dimension
  properties</a> <a id="attributes-for-embedded-content-and-images:'margin-top'" href=https://drafts.csswg.org/css-box/#propdef-margin-top data-x-internal="'margin-top'">'margin-top'</a> and <a id="attributes-for-embedded-content-and-images:'margin-bottom'" href=https://drafts.csswg.org/css-box/#propdef-margin-bottom data-x-internal="'margin-bottom'">'margin-bottom'</a> on the element.</p>

  <p>When an <code id=attributes-for-embedded-content-and-images:the-iframe-element-2><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> element has a <code id=attributes-for-embedded-content-and-images:attr-iframe-frameborder><a href=obsolete.html#attr-iframe-frameborder>frameborder</a></code> attribute whose value, when parsed using the
  <a id=attributes-for-embedded-content-and-images:rules-for-parsing-integers href=common-microsyntaxes.html#rules-for-parsing-integers>rules for parsing integers</a>, is zero or an error, the user agent is expected to have
  <a href=#presentational-hints id=attributes-for-embedded-content-and-images:presentational-hints-2>presentational hints</a> setting the element's <a id="attributes-for-embedded-content-and-images:'border-top-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-top-width data-x-internal="'border-top-width'">'border-top-width'</a>,
  <a id="attributes-for-embedded-content-and-images:'border-right-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-right-width data-x-internal="'border-right-width'">'border-right-width'</a>, <a id="attributes-for-embedded-content-and-images:'border-bottom-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-bottom-width data-x-internal="'border-bottom-width'">'border-bottom-width'</a>, and
  <a id="attributes-for-embedded-content-and-images:'border-left-width'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-left-width data-x-internal="'border-left-width'">'border-left-width'</a> properties to zero.</p>

  <p>When an <code id=attributes-for-embedded-content-and-images:the-img-element-4><a href=embedded-content.html#the-img-element>img</a></code> element, <code id=attributes-for-embedded-content-and-images:the-object-element-4><a href=iframe-embed-object.html#the-object-element>object</a></code> element, or <code id=attributes-for-embedded-content-and-images:the-input-element-4><a href=input.html#the-input-element>input</a></code> element
  with a <code id=attributes-for-embedded-content-and-images:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#image-button-state-(type=image)" id="attributes-for-embedded-content-and-images:image-button-state-(type=image)-4">Image Button</a> state has a <code>border</code> attribute whose value, when parsed using the <a id=attributes-for-embedded-content-and-images:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for
  parsing non-negative integers</a>, is found to be a number greater than zero, the user agent is
  expected to use the parsed value for eight <a href=#presentational-hints id=attributes-for-embedded-content-and-images:presentational-hints-3>presentational hints</a>: four setting the
  parsed value as a pixel length for the element's <a id="attributes-for-embedded-content-and-images:'border-top-width'-2" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-top-width data-x-internal="'border-top-width'">'border-top-width'</a>,
  <a id="attributes-for-embedded-content-and-images:'border-right-width'-2" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-right-width data-x-internal="'border-right-width'">'border-right-width'</a>, <a id="attributes-for-embedded-content-and-images:'border-bottom-width'-2" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-bottom-width data-x-internal="'border-bottom-width'">'border-bottom-width'</a>, and
  <a id="attributes-for-embedded-content-and-images:'border-left-width'-2" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-left-width data-x-internal="'border-left-width'">'border-left-width'</a> properties, and four setting the element's
  <a id="attributes-for-embedded-content-and-images:'border-top-style'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-top-style data-x-internal="'border-top-style'">'border-top-style'</a>, <a id="attributes-for-embedded-content-and-images:'border-right-style'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-right-style data-x-internal="'border-right-style'">'border-right-style'</a>,
  <a id="attributes-for-embedded-content-and-images:'border-bottom-style'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-bottom-style data-x-internal="'border-bottom-style'">'border-bottom-style'</a>, and <a id="attributes-for-embedded-content-and-images:'border-left-style'" href=https://drafts.csswg.org/css-backgrounds/#propdef-border-left-style data-x-internal="'border-left-style'">'border-left-style'</a> properties to the value
  'solid'.</p>

  <p id=dimRendering>The <code id=attributes-for-embedded-content-and-images:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> and <code id=attributes-for-embedded-content-and-images:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> attributes on an <code id=attributes-for-embedded-content-and-images:the-img-element-5><a href=embedded-content.html#the-img-element>img</a></code> element's <a href=embedded-content.html#concept-img-dimension-attribute-source id=attributes-for-embedded-content-and-images:concept-img-dimension-attribute-source>dimension attribute source</a> <a href=#maps-to-the-dimension-property id=attributes-for-embedded-content-and-images:maps-to-the-dimension-property-3>map to the dimension properties</a>
  <a id="attributes-for-embedded-content-and-images:'width'" href=https://drafts.csswg.org/css2/#the-width-property data-x-internal="'width'">'width'</a> and <a id="attributes-for-embedded-content-and-images:'height'" href=https://drafts.csswg.org/css2/#the-height-property data-x-internal="'height'">'height'</a> on the <code id=attributes-for-embedded-content-and-images:the-img-element-6><a href=embedded-content.html#the-img-element>img</a></code> element respectively. They
  similarly <a href=#map-to-the-aspect-ratio-property-(using-dimension-rules) id=attributes-for-embedded-content-and-images:map-to-the-aspect-ratio-property-(using-dimension-rules)>map to the aspect-ratio property (using dimension rules)</a> of the
  <code id=attributes-for-embedded-content-and-images:the-img-element-7><a href=embedded-content.html#the-img-element>img</a></code> element.</p>

  <p>The <code id=attributes-for-embedded-content-and-images:attr-dim-width-2><a href=embedded-content-other.html#attr-dim-width>width</a></code> and <code id=attributes-for-embedded-content-and-images:attr-dim-height-2><a href=embedded-content-other.html#attr-dim-height>height</a></code>
  attributes on <code id=attributes-for-embedded-content-and-images:the-embed-element-4><a href=iframe-embed-object.html#the-embed-element>embed</a></code>, <code id=attributes-for-embedded-content-and-images:the-iframe-element-3><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>, <code id=attributes-for-embedded-content-and-images:the-object-element-5><a href=iframe-embed-object.html#the-object-element>object</a></code>, and <code id=attributes-for-embedded-content-and-images:the-video-element><a href=media.html#the-video-element>video</a></code>
  elements, and <code id=attributes-for-embedded-content-and-images:the-input-element-5><a href=input.html#the-input-element>input</a></code> elements with a <code id=attributes-for-embedded-content-and-images:attr-input-type-5><a href=input.html#attr-input-type>type</a></code>
  attribute in the <a href="input.html#image-button-state-(type=image)" id="attributes-for-embedded-content-and-images:image-button-state-(type=image)-5">Image Button</a> state and that either
  represents an image or that the user expects will eventually represent an image, <a href=#maps-to-the-dimension-property id=attributes-for-embedded-content-and-images:maps-to-the-dimension-property-4>map to the dimension properties</a>
  <a id="attributes-for-embedded-content-and-images:'width'-2" href=https://drafts.csswg.org/css2/#the-width-property data-x-internal="'width'">'width'</a> and <a id="attributes-for-embedded-content-and-images:'height'-2" href=https://drafts.csswg.org/css2/#the-height-property data-x-internal="'height'">'height'</a> on the element respectively.</p>

  <p>The <code id=attributes-for-embedded-content-and-images:attr-dim-width-3><a href=embedded-content-other.html#attr-dim-width>width</a></code> and <code id=attributes-for-embedded-content-and-images:attr-dim-height-3><a href=embedded-content-other.html#attr-dim-height>height</a></code>
  attributes <a href=#map-to-the-aspect-ratio-property-(using-dimension-rules) id=attributes-for-embedded-content-and-images:map-to-the-aspect-ratio-property-(using-dimension-rules)-2>map to the aspect-ratio property (using dimension rules)</a> on
  <code id=attributes-for-embedded-content-and-images:the-img-element-8><a href=embedded-content.html#the-img-element>img</a></code> and <code id=attributes-for-embedded-content-and-images:the-video-element-2><a href=media.html#the-video-element>video</a></code> elements, and <code id=attributes-for-embedded-content-and-images:the-input-element-6><a href=input.html#the-input-element>input</a></code> elements with a <code id=attributes-for-embedded-content-and-images:attr-input-type-6><a href=input.html#attr-input-type>type</a></code> attribute in the <a href="input.html#image-button-state-(type=image)" id="attributes-for-embedded-content-and-images:image-button-state-(type=image)-6">Image
  Button</a> state.</p>

  <p>The <code id=attributes-for-embedded-content-and-images:attr-canvas-width><a href=canvas.html#attr-canvas-width>width</a></code> and <code id=attributes-for-embedded-content-and-images:attr-canvas-height><a href=canvas.html#attr-canvas-height>height</a></code> attributes <a href=#map-to-the-aspect-ratio-property id=attributes-for-embedded-content-and-images:map-to-the-aspect-ratio-property>map to the aspect-ratio property</a>
  on <code id=attributes-for-embedded-content-and-images:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code> elements.</p>
  


  

  <h4 id=image-maps-2><span class=secno>15.4.4</span> Image maps<a href=#image-maps-2 class=self-link></a></h4>

  <p>Shapes on an <a id=image-maps-2:image-map href=image-maps.html#image-map>image map</a> are expected to act, for the purpose of the CSS cascade, as
  elements independent of the original <code id=image-maps-2:the-area-element><a href=image-maps.html#the-area-element>area</a></code> element that happen to match the same style
  rules but inherit from the <code id=image-maps-2:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> or <code id=image-maps-2:the-object-element><a href=iframe-embed-object.html#the-object-element>object</a></code> element.</p>

  <p>For the purposes of the rendering, only the <a id="image-maps-2:'cursor'" href=https://drafts.csswg.org/css-ui/#cursor data-x-internal="'cursor'">'cursor'</a> property is expected to have
  any effect on the shape.</p>

  <p class=example>Thus, for example, if an <code id=image-maps-2:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> element has a <code id=image-maps-2:attr-style><a href=dom.html#attr-style>style</a></code> attribute that sets the <a id="image-maps-2:'cursor'-2" href=https://drafts.csswg.org/css-ui/#cursor data-x-internal="'cursor'">'cursor'</a> property to 'help',
  then when the user designates that shape, the cursor would change to a Help cursor.</p>

  <p class=example>Similarly, if an <code id=image-maps-2:the-area-element-3><a href=image-maps.html#the-area-element>area</a></code> element had a CSS rule that set its
  <a id="image-maps-2:'cursor'-3" href=https://drafts.csswg.org/css-ui/#cursor data-x-internal="'cursor'">'cursor'</a> property to 'inherit' (or if no rule setting the <a id="image-maps-2:'cursor'-4" href=https://drafts.csswg.org/css-ui/#cursor data-x-internal="'cursor'">'cursor'</a>
  property matched the element at all), the shape's cursor would be inherited from the
  <code id=image-maps-2:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> or <code id=image-maps-2:the-object-element-2><a href=iframe-embed-object.html#the-object-element>object</a></code> element of the <a id=image-maps-2:image-map-2 href=image-maps.html#image-map>image map</a>, not from the parent
  of the <code id=image-maps-2:the-area-element-4><a href=image-maps.html#the-area-element>area</a></code> element.</p>

  


  

  <h3 id=widgets><span class=secno>15.5</span> <span id=bindings></span>Widgets<a href=#widgets class=self-link></a></h3>

  <h4 id=native-appearance-2><span class=secno>15.5.1</span> Native appearance<a href=#native-appearance-2 class=self-link></a></h4>

  <p>The <cite>CSS Basic User Interface</cite> specification calls elements that can have a
  <a id=native-appearance-2:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> <a href=https://drafts.csswg.org/css-ui/#widget id=native-appearance-2:widget data-x-internal=widget>widgets</a>, and defines whether to use that <a id=native-appearance-2:native-appearance-2 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native
  appearance</a> depending on the <a id="native-appearance-2:'appearance'" href=https://drafts.csswg.org/css-ui/#appearance-switching data-x-internal="'appearance'">'appearance'</a> property. That logic, in
  turn, depends on whether each the element is classified as a <a id=native-appearance-2:devolvable-widget href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable
  widget</a> or <a id=native-appearance-2:non-devolvable-widget href=https://drafts.csswg.org/css-ui/#non-devolvable data-x-internal=non-devolvable-widget>non-devolvable widget</a>. This section defines which elements match
  these concepts for HTML, what their <a id=native-appearance-2:native-appearance-3 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> is, and any particularity of
  their <a href=https://drafts.csswg.org/css-ui/#devolved id=native-appearance-2:devolved-widget data-x-internal=devolved-widget>devolved</a> state or <a id=native-appearance-2:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive appearance</a>.
  <a href=references.html#refsCSSUI>[CSSUI]</a></p>

  <p>The following elements can have a <a id=native-appearance-2:native-appearance-4 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> for the purpose of the CSS
  <a id="native-appearance-2:'appearance'-2" href=https://drafts.csswg.org/css-ui/#appearance-switching data-x-internal="'appearance'">'appearance'</a> property.</p>

  <ul class=brief><li><code id=native-appearance-2:the-button-element><a href=form-elements.html#the-button-element>button</a></code><li><code id=native-appearance-2:the-input-element><a href=input.html#the-input-element>input</a></code><li><code id=native-appearance-2:the-meter-element><a href=form-elements.html#the-meter-element>meter</a></code><li><code id=native-appearance-2:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code><li><code id=native-appearance-2:the-select-element><a href=form-elements.html#the-select-element>select</a></code><li><code id=native-appearance-2:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code></ul>

  


  

  <h4 id=writing-mode><span class=secno>15.5.2</span> Writing mode<a href=#writing-mode class=self-link></a></h4>

  <p>Several widgets have their rendering controlled by the <a id="writing-mode:'writing-mode'" href=https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode data-x-internal="'writing-mode'">'writing-mode'</a> CSS
  property. For the purposes of those widgets, we have the following definitions.</p>

  <p>A <dfn id=horizontal-writing-mode>horizontal writing mode</dfn> is when resolving the <a id="writing-mode:'writing-mode'-2" href=https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode data-x-internal="'writing-mode'">'writing-mode'</a>
  property of the control results in a computed value of 'horizontal-tb'.</p>

  <p>A <dfn id=vertical-writing-mode>vertical writing mode</dfn> is when resolving the <a id="writing-mode:'writing-mode'-3" href=https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode data-x-internal="'writing-mode'">'writing-mode'</a> property
  of the control results in a computed value of either 'vertical-rl', 'vertical-lr', 'sideways-rl'
  or 'sideways-lr'.</p>

  


  

  <h4 id=button-layout><span class=secno>15.5.3</span> Button layout<a href=#button-layout class=self-link></a></h4>

  <p>When an element uses <a href=#button-layout-2 id=button-layout:button-layout-2>button layout</a>, it is a <a id=button-layout:devolvable-widget href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>, and
  its <a id=button-layout:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> is that of a button.</p>

  <p><dfn id=button-layout-2>Button layout</dfn> is as follows:</p>

  <ul><li>
    <p>If the element is a <code id=button-layout:the-button-element><a href=form-elements.html#the-button-element>button</a></code> element, then the <a id="button-layout:'display'" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> property is
    expected to act as follows:</p>

    <ul><li><p>If the computed value of <a id="button-layout:'display'-2" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> is 'inline-grid', 'grid',
     'inline-flex', 'flex', 'none', or 'contents', then behave as the computed value.<li><p>Otherwise, if the computed value of <a id="button-layout:'display'-3" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> is a value such that the
     <a id=button-layout:outer-display-type href=https://drafts.csswg.org/css-display/#outer-display-type data-x-internal=outer-display-type>outer display type</a> is 'inline', then behave as 'inline-block'.<li><p>Otherwise, behave as 'flow-root'.</ul>
   <li><p>The element is expected to establish a new <a id=button-layout:formatting-context href=https://drafts.csswg.org/css-display/#formatting-context data-x-internal=formatting-context>formatting context</a> for its
   contents. The type of this formatting context is determined by its <a id="button-layout:'display'-4" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> value,
   as usual.<li><p>If the element is <a id=button-layout:absolutely-positioned href=https://drafts.csswg.org/css-position/#absolute-position data-x-internal=absolutely-positioned>absolutely-positioned</a>, then for the purpose of the
   <a href=https://drafts.csswg.org/css2/#visuren>CSS visual formatting model</a>, act as if
   the element is a <a id=button-layout:replaced-element href=https://drafts.csswg.org/css-display/#replaced-element data-x-internal=replaced-element>replaced element</a>. <a href=references.html#refsCSS>[CSS]</a><li><p>If the <a id=button-layout:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of <a id="button-layout:'inline-size'" href=https://drafts.csswg.org/css-logical/#propdef-inline-size data-x-internal="'inline-size'">'inline-size'</a> is 'auto', then the
   <a id=button-layout:used-value href=https://drafts.csswg.org/css-cascade/#used-value data-x-internal=used-value>used value</a> is the <a id=button-layout:fit-content-inline-size href=https://drafts.csswg.org/css-sizing/#fit-content-inline-size data-x-internal=fit-content-inline-size>fit-content inline size</a>.<li><p>For the purpose of the 'normal' keyword of the <a id="button-layout:'align-self'" href=https://drafts.csswg.org/css-align/#propdef-align-self data-x-internal="'align-self'">'align-self'</a> property, act
   as if the element is a replaced element.<li>
    <p>If the element is an <code id=button-layout:the-input-element><a href=input.html#the-input-element>input</a></code> element, or if it is a <code id=button-layout:the-button-element-2><a href=form-elements.html#the-button-element>button</a></code> element
    and its computed value for <a id="button-layout:'display'-5" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> is not 'inline-grid', 'grid', 'inline-flex',
    or 'flex', then the element's box has a child <dfn id=anonymous-button-content-box>anonymous button content box</dfn> with the
    following behaviors:</p>

    <ul><li><p>The box is a <a id=button-layout:block-level href=https://drafts.csswg.org/css-display/#block-level data-x-internal=block-level>block-level</a> <a id=button-layout:block-container href=https://drafts.csswg.org/css-display/#block-container data-x-internal=block-container>block container</a> that establishes a
     new <a id=button-layout:block-formatting-context href=https://drafts.csswg.org/css-display/#block-formatting-context data-x-internal=block-formatting-context>block formatting context</a> (i.e., <a id="button-layout:'display'-6" href=https://drafts.csswg.org/css2/#display-prop data-x-internal="'display'">'display'</a> is
     'flow-root').<li><p>If the box does not overflow in the horizontal axis, then it is centered
     horizontally.<li><p>If the box does not overflow in the vertical axis, then it is centered
     vertically.</ul>

    <p>Otherwise, there is no <a href=#anonymous-button-content-box id=button-layout:anonymous-button-content-box>anonymous button content box</a>.</p>
   </ul>

  <p class=XXX>Need to define the expected <a id=button-layout:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive appearance</a>.</p>

  <h4 id=the-button-element-2><span class=secno>15.5.4</span> The <code id=the-button-element-2:the-button-element><a href=form-elements.html#the-button-element>button</a></code> element<a href=#the-button-element-2 class=self-link></a></h4>

  <p>The <code id=the-button-element-2:the-button-element-2><a href=form-elements.html#the-button-element>button</a></code> element, when it generates a <a id=the-button-element-2:css-box href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS box</a>, is expected to
  depict a button and to use <a href=#button-layout-2 id=the-button-element-2:button-layout-2>button layout</a> whose <a href=#anonymous-button-content-box id=the-button-element-2:anonymous-button-content-box>anonymous button content
  box</a>'s contents (if there is an <a href=#anonymous-button-content-box id=the-button-element-2:anonymous-button-content-box-2>anonymous button content box</a>) are the child
  boxes the element's box would otherwise have.</p>

  

  

  <h4 id=the-details-and-summary-elements><span class=secno>15.5.5</span> The <code id=the-details-and-summary-elements:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code> and <code id=the-details-and-summary-elements:the-summary-element><a href=interactive-elements.html#the-summary-element>summary</a></code> elements<a href=#the-details-and-summary-elements class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>details, summary </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> block<c- p>;</c->
<c- p>}</c->
<c- f>details &gt; summary:first-of-type </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> list-item<c- p>;</c->
  <c- k>counter-increment</c-><c- p>:</c-> list-item <c- m>0</c-><c- p>;</c->
  <c- k>list-style</c-><c- p>:</c-> disclosure-closed inside<c- p>;</c->
<c- p>}</c->
<c- f>details[open] &gt; summary:first-of-type </c-><c- p>{</c->
  <c- k>list-style-type</c-><c- p>:</c-> disclosure-open<c- p>;</c->
<c- p>}</c-></code></pre>

  <p>The <code id=the-details-and-summary-elements:the-details-element-2><a href=interactive-elements.html#the-details-element>details</a></code> element is expected to have an internal <a id=the-details-and-summary-elements:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a> with
  three child elements:</p>

  <ol><li>
    <p>The first child element is a <code id=the-details-and-summary-elements:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code> that is expected to take the
    <code id=the-details-and-summary-elements:the-details-element-3><a href=interactive-elements.html#the-details-element>details</a></code> element's first <code id=the-details-and-summary-elements:the-summary-element-2><a href=interactive-elements.html#the-summary-element>summary</a></code> element child, if any.  This element
    has a single child <code id=the-details-and-summary-elements:the-summary-element-3><a href=interactive-elements.html#the-summary-element>summary</a></code> element called the <dfn id=default-summary>default summary</dfn> which has
    text content that is <a id=the-details-and-summary-elements:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> (and probably locale-specific).</p>

    <p>The <code id=the-details-and-summary-elements:the-summary-element-4><a href=interactive-elements.html#the-summary-element>summary</a></code> element that this slot <a id=the-details-and-summary-elements:represents href=dom.html#represents>represents</a> is expected to allow
    the user to request the details be shown or hidden.</p>
   <li>
    <p>The second child element is a <code id=the-details-and-summary-elements:the-slot-element-2><a href=scripting.html#the-slot-element>slot</a></code> that is expected to take the
    <code id=the-details-and-summary-elements:the-details-element-4><a href=interactive-elements.html#the-details-element>details</a></code> element's remaining descendants, if any.  This element has no contents.</p>

    <p>This element is expected to match the <a id="the-details-and-summary-elements:'::details-content'" href=https://drafts.csswg.org/css-pseudo/#details-content-pseudo data-x-internal="'::details-content'">'::details-content'</a> pseudo-element.</p>

    <p>This element is expected to have its <code id=the-details-and-summary-elements:attr-style><a href=dom.html#attr-style>style</a></code> attribute set to
    "<code>display: block; content-visibility: hidden;</code>" when the
    <code id=the-details-and-summary-elements:the-details-element-5><a href=interactive-elements.html#the-details-element>details</a></code> element does not have an <code id=the-details-and-summary-elements:attr-details-open><a href=interactive-elements.html#attr-details-open>open</a></code>
    attribute. When it does have the <code id=the-details-and-summary-elements:attr-details-open-2><a href=interactive-elements.html#attr-details-open>open</a></code> attribute, the
    <code id=the-details-and-summary-elements:attr-style-2><a href=dom.html#attr-style>style</a></code> attribute is expected to be set to
    "<code>display: block;</code>".</p>

    <p class=note>Because the slots are hidden inside a shadow tree, this <code id=the-details-and-summary-elements:attr-style-3><a href=dom.html#attr-style>style</a></code> attribute is not directly visible to author code. Its impacts,
    however, are visible. Notably, the choice of <code>content-visibility: hidden</code>
    instead of, e.g., <code>display: none</code>, impacts the results of various APIs that
    query layout information.</p>
   <li>
    <p>The third child element is either a <code id=the-details-and-summary-elements:the-link-element><a href=semantics.html#the-link-element>link</a></code> or <code id=the-details-and-summary-elements:the-style-element><a href=semantics.html#the-style-element>style</a></code>
    element with the following styles for the <a href=#default-summary id=the-details-and-summary-elements:default-summary>default summary</a>:</p>
    <pre><code class='css'><c- f>:host summary </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> list-item<c- p>;</c->
  <c- k>counter-increment</c-><c- p>:</c-> list-item <c- m>0</c-><c- p>;</c->
  <c- k>list-style</c-><c- p>:</c-> disclosure-closed inside<c- p>;</c->
<c- p>}</c->
<c- f>:host([open]) summary </c-><c- p>{</c->
  <c- k>list-style-type</c-><c- p>:</c-> disclosure-open<c- p>;</c->
<c- p>}</c-></code></pre>
    <p class=note>The position of this child element relative to the other two is not observable.
    This means that implementations might have it in a different order relative to its siblings.
    Implementations might even associate the style with the shadow tree using a mechanism that is
    not an element.</p>
   </ol>

  <p class=note>The structure of this shadow tree is observable through the ways that the children
  of the <code id=the-details-and-summary-elements:the-details-element-6><a href=interactive-elements.html#the-details-element>details</a></code> element and the <a id="the-details-and-summary-elements:'::details-content'-2" href=https://drafts.csswg.org/css-pseudo/#details-content-pseudo data-x-internal="'::details-content'">'::details-content'</a> pseudo-element
  respond to CSS styles.</p>

  

  

  

  <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>15.5.6</span> The <code id=the-input-element-as-a-text-entry-widget:the-input-element><a href=input.html#the-input-element>input</a></code> element as a text entry widget<a href=#the-input-element-as-a-text-entry-widget class=self-link></a></h4>

  <p>An <code id=the-input-element-as-a-text-entry-widget:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-text-entry-widget:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element-as-a-text-entry-widget:text-(type=text)-state-and-search-state-(type=search)">Text</a>, <a href="input.html#telephone-state-(type=tel)" id="the-input-element-as-a-text-entry-widget:telephone-state-(type=tel)">Telephone</a>, <a href="input.html#url-state-(type=url)" id="the-input-element-as-a-text-entry-widget:url-state-(type=url)">URL</a>, or
  <a href="input.html#email-state-(type=email)" id="the-input-element-as-a-text-entry-widget:email-state-(type=email)">Email</a> state, is a <a id=the-input-element-as-a-text-entry-widget:devolvable-widget href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>. Its
  expected <a id=the-input-element-as-a-text-entry-widget:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> is to render as an <a id="the-input-element-as-a-text-entry-widget:'inline-block'" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting
  a one-line text control.</p>

  <p>An <code id=the-input-element-as-a-text-entry-widget:the-input-element-3><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-text-entry-widget:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#text-(type=text)-state-and-search-state-(type=search)" id="the-input-element-as-a-text-entry-widget:text-(type=text)-state-and-search-state-(type=search)-2">Search</a> state is a <a id=the-input-element-as-a-text-entry-widget:devolvable-widget-2 href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>.
  Its expected <a id=the-input-element-as-a-text-entry-widget:native-appearance-2 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> is to render as an <a id="the-input-element-as-a-text-entry-widget:'inline-block'-2" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box
  depicting a one-line text control. If the <a id=the-input-element-as-a-text-entry-widget:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of the element's
  <a id="the-input-element-as-a-text-entry-widget:'appearance'" href=https://drafts.csswg.org/css-ui/#appearance-switching data-x-internal="'appearance'">'appearance'</a> property is not <code id="the-input-element-as-a-text-entry-widget:'textfield'"><a data-x-internal="'textfield'" href=https://drafts.csswg.org/css-ui/#valdef-appearance-textfield>'textfield'</a></code>, it may have a distinct style
  indicating that it is a search field.</p>

  <p>An <code id=the-input-element-as-a-text-entry-widget:the-input-element-4><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-text-entry-widget:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#password-state-(type=password)" id="the-input-element-as-a-text-entry-widget:password-state-(type=password)">Password</a> state is a <a id=the-input-element-as-a-text-entry-widget:devolvable-widget-3 href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable
  widget</a>. Its expected <a id=the-input-element-as-a-text-entry-widget:native-appearance-3 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> is to render as an
  <a id="the-input-element-as-a-text-entry-widget:'inline-block'-3" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting a one-line text control that obscures data entry.</p>

  <p>For <code id=the-input-element-as-a-text-entry-widget:the-input-element-5><a href=input.html#the-input-element>input</a></code> elements whose <code id=the-input-element-as-a-text-entry-widget:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute is
  in one of the above states, the <a id=the-input-element-as-a-text-entry-widget:used-value href=https://drafts.csswg.org/css-cascade/#used-value data-x-internal=used-value>used value</a> of the <a id="the-input-element-as-a-text-entry-widget:'line-height'" href=https://drafts.csswg.org/css2/#propdef-line-height data-x-internal="'line-height'">'line-height'</a> property
  must be a length value that is no smaller than what the <a id=the-input-element-as-a-text-entry-widget:used-value-2 href=https://drafts.csswg.org/css-cascade/#used-value data-x-internal=used-value>used value</a> would be for
  'line-height: normal'.</p>

  <p class=note>The <a id=the-input-element-as-a-text-entry-widget:used-value-3 href=https://drafts.csswg.org/css-cascade/#used-value data-x-internal=used-value>used value</a> will not be the actual keyword 'normal'. Also, this
  rule does not affect the <a id=the-input-element-as-a-text-entry-widget:computed-value-2 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a>.</p>

  <p>If these text controls provide a text selection, then, when the user changes the current
  selection, the user agent is expected to <a id=the-input-element-as-a-text-entry-widget:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=the-input-element-as-a-text-entry-widget:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user
  interaction task source</a> given the <code id=the-input-element-as-a-text-entry-widget:the-input-element-6><a href=input.html#the-input-element>input</a></code> element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-input-element-as-a-text-entry-widget:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=the-input-element-as-a-text-entry-widget:event-select><a href=indices.html#event-select>select</a></code>
  at the element, with the <code id=the-input-element-as-a-text-entry-widget:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to
  true.</p>

  <p>An <code id=the-input-element-as-a-text-entry-widget:the-input-element-7><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-text-entry-widget:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute is
  in one of the above states is an <a id=the-input-element-as-a-text-entry-widget:element-with-default-preferred-size href=https://drafts.csswg.org/css-ui/#element-with-default-preferred-size data-x-internal=element-with-default-preferred-size>element with default preferred size</a>, and user
  agents are expected to apply the <a id="the-input-element-as-a-text-entry-widget:'field-sizing'" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a> CSS property to the element. User
  agents are expected to determine the <a id=the-input-element-as-a-text-entry-widget:inline-size href=https://drafts.csswg.org/css-writing-modes/#inline-size data-x-internal=inline-size>inline size</a> of its <a id=the-input-element-as-a-text-entry-widget:intrinsic-size href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a>
  by the following steps:</p>

  <ol><li>
    <p>If the <a id="the-input-element-as-a-text-entry-widget:'field-sizing'-2" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a> property on the element has a <a id=the-input-element-as-a-text-entry-widget:computed-value-3 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a>
    of <a href=https://drafts.csswg.org/css-ui/#valdef-field-sizing-content id=the-input-element-as-a-text-entry-widget:field-sizing-content data-x-internal=field-sizing-content>'content'</a>, the <a id=the-input-element-as-a-text-entry-widget:inline-size-2 href=https://drafts.csswg.org/css-writing-modes/#inline-size data-x-internal=inline-size>inline size</a> is
    determined by the text which the element shows. The text is either a
    <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element-as-a-text-entry-widget:concept-fe-value>value</a> or a short hint specified by the
    <code id=the-input-element-as-a-text-entry-widget:attr-input-placeholder><a href=input.html#attr-input-placeholder>placeholder</a></code> attribute. User agents may take the
    text caret size into account in the <a id=the-input-element-as-a-text-entry-widget:inline-size-3 href=https://drafts.csswg.org/css-writing-modes/#inline-size data-x-internal=inline-size>inline size</a>.</p>
   <li>
    <p>If the element has a <code id=the-input-element-as-a-text-entry-widget:attr-input-size><a href=input.html#attr-input-size>size</a></code> attribute, and parsing that
    attribute's value using the <a id=the-input-element-as-a-text-entry-widget:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> doesn't
    generate an error, return the value obtained from applying the <a href=#converting-a-character-width-to-pixels id=the-input-element-as-a-text-entry-widget:converting-a-character-width-to-pixels>converting a character
    width to pixels</a> algorithm to the value of the attribute.</p>
   <li>
    <p>Otherwise, return the value obtained from applying the <a href=#converting-a-character-width-to-pixels id=the-input-element-as-a-text-entry-widget:converting-a-character-width-to-pixels-2>converting a character width to
    pixels</a> algorithm to the number 20.</p>
   </ol>

  <p>The <dfn id=converting-a-character-width-to-pixels>converting a character width to pixels</dfn> algorithm returns <span>(<var>size</var>-1)×<var>avg</var> + <var>max</var></span>,
  where <var>size</var> is the character width to convert, <var>avg</var> is the
  average character width of the primary font for the element for which the algorithm is being run,
  in pixels, and <var>max</var> is the maximum character width of that same font, also in
  pixels. (The element's <a id="the-input-element-as-a-text-entry-widget:'letter-spacing'" href=https://drafts.csswg.org/css-text/#letter-spacing-property data-x-internal="'letter-spacing'">'letter-spacing'</a> property does not affect the result.)</p>

  <p>These text controls are expected to be <a href=https://drafts.csswg.org/css-overflow/#scroll-container id=the-input-element-as-a-text-entry-widget:scroll-container data-x-internal=scroll-container>scroll
  containers</a> and support scrolling in the <a id=the-input-element-as-a-text-entry-widget:inline-axis href=https://drafts.csswg.org/css-writing-modes/#inline-axis data-x-internal=inline-axis>inline axis</a>, but not the <a id=the-input-element-as-a-text-entry-widget:block-axis href=https://drafts.csswg.org/css-writing-modes/#block-axis data-x-internal=block-axis>block
  axis</a>.</p>

  <p class=XXX>Need to detail the expected <a id=the-input-element-as-a-text-entry-widget:native-appearance-4 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> and <a id=the-input-element-as-a-text-entry-widget:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive
  appearance</a>.</p>

  


  

  <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>15.5.7</span> The <code id=the-input-element-as-domain-specific-widgets:the-input-element><a href=input.html#the-input-element>input</a></code> element as domain-specific widgets<a href=#the-input-element-as-domain-specific-widgets class=self-link></a></h4>

  <p>An <code id=the-input-element-as-domain-specific-widgets:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-domain-specific-widgets:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#date-state-(type=date)" id="the-input-element-as-domain-specific-widgets:date-state-(type=date)">Date</a> state is a <a id=the-input-element-as-domain-specific-widgets:devolvable-widget href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>
  expected to render as an <a id="the-input-element-as-domain-specific-widgets:'inline-block'" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting a date control.</p>

  <p>An <code id=the-input-element-as-domain-specific-widgets:the-input-element-3><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-domain-specific-widgets:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#month-state-(type=month)" id="the-input-element-as-domain-specific-widgets:month-state-(type=month)">Month</a> state is a <a id=the-input-element-as-domain-specific-widgets:devolvable-widget-2 href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>
  expected to render as an <a id="the-input-element-as-domain-specific-widgets:'inline-block'-2" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting a month control.</p>

  <p>An <code id=the-input-element-as-domain-specific-widgets:the-input-element-4><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-domain-specific-widgets:attr-input-type-3><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#week-state-(type=week)" id="the-input-element-as-domain-specific-widgets:week-state-(type=week)">Week</a> state is a <a id=the-input-element-as-domain-specific-widgets:devolvable-widget-3 href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>
  expected to render as an <a id="the-input-element-as-domain-specific-widgets:'inline-block'-3" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting a week control.</p>

  <p>An <code id=the-input-element-as-domain-specific-widgets:the-input-element-5><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-domain-specific-widgets:attr-input-type-4><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#time-state-(type=time)" id="the-input-element-as-domain-specific-widgets:time-state-(type=time)">Time</a> state is a <a id=the-input-element-as-domain-specific-widgets:devolvable-widget-4 href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>
  expected to render as an <a id="the-input-element-as-domain-specific-widgets:'inline-block'-4" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting a time control.</p>

  <p>An <code id=the-input-element-as-domain-specific-widgets:the-input-element-6><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-domain-specific-widgets:attr-input-type-5><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#local-date-and-time-state-(type=datetime-local)" id="the-input-element-as-domain-specific-widgets:local-date-and-time-state-(type=datetime-local)">Local Date and Time</a> state is a
  <a id=the-input-element-as-domain-specific-widgets:devolvable-widget-5 href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a> expected to render as an <a id="the-input-element-as-domain-specific-widgets:'inline-block'-5" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting
  a local date and time control.</p>

  <p>An <code id=the-input-element-as-domain-specific-widgets:the-input-element-7><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-domain-specific-widgets:attr-input-type-6><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#number-state-(type=number)" id="the-input-element-as-domain-specific-widgets:number-state-(type=number)">Number</a> state is a <a id=the-input-element-as-domain-specific-widgets:devolvable-widget-6 href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>
  expected to render as an <a id="the-input-element-as-domain-specific-widgets:'inline-block'-6" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting a number control.</p>

  <p>An <code id=the-input-element-as-domain-specific-widgets:the-input-element-8><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-domain-specific-widgets:attr-input-type-7><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#number-state-(type=number)" id="the-input-element-as-domain-specific-widgets:number-state-(type=number)-2">Number</a> state is an
  <a id=the-input-element-as-domain-specific-widgets:element-with-default-preferred-size href=https://drafts.csswg.org/css-ui/#element-with-default-preferred-size data-x-internal=element-with-default-preferred-size>element with default preferred size</a>, and user agents are expected to apply the
  <a id="the-input-element-as-domain-specific-widgets:'field-sizing'" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a> CSS property to the element. The <a id=the-input-element-as-domain-specific-widgets:block-size href=https://drafts.csswg.org/css-writing-modes/#block-size data-x-internal=block-size>block size</a> of the
  <a id=the-input-element-as-domain-specific-widgets:intrinsic-size href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> is about one line high. If the <a id="the-input-element-as-domain-specific-widgets:'field-sizing'-2" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a> property
  on the element has a <a id=the-input-element-as-domain-specific-widgets:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of
  <a href=https://drafts.csswg.org/css-ui/#valdef-field-sizing-content id=the-input-element-as-domain-specific-widgets:field-sizing-content data-x-internal=field-sizing-content>'content'</a>, the <a id=the-input-element-as-domain-specific-widgets:inline-size href=https://drafts.csswg.org/css-writing-modes/#inline-size data-x-internal=inline-size>inline size</a> of the
  <a id=the-input-element-as-domain-specific-widgets:intrinsic-size-2 href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> is expected to be about as wide as necessary to show the current
  <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element-as-domain-specific-widgets:concept-fe-value>value</a>. Otherwise, the <a id=the-input-element-as-domain-specific-widgets:inline-size-2 href=https://drafts.csswg.org/css-writing-modes/#inline-size data-x-internal=inline-size>inline size</a> of the
  <a id=the-input-element-as-domain-specific-widgets:intrinsic-size-3 href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> is expected to be about as wide as necessary to show the widest
  possible value.</p>

  <p>An <code id=the-input-element-as-domain-specific-widgets:the-input-element-9><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-domain-specific-widgets:attr-input-type-8><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#date-state-(type=date)" id="the-input-element-as-domain-specific-widgets:date-state-(type=date)-2">Date</a>,
  <a href="input.html#month-state-(type=month)" id="the-input-element-as-domain-specific-widgets:month-state-(type=month)-2">Month</a>,
  <a href="input.html#week-state-(type=week)" id="the-input-element-as-domain-specific-widgets:week-state-(type=week)-2">Week</a>, <a href="input.html#time-state-(type=time)" id="the-input-element-as-domain-specific-widgets:time-state-(type=time)-2">Time</a>,
  or <a href="input.html#local-date-and-time-state-(type=datetime-local)" id="the-input-element-as-domain-specific-widgets:local-date-and-time-state-(type=datetime-local)-2">Local Date and Time</a> state, is expected to
  be about one line high, and about as wide as necessary to show the widest possible value.</p>

  <p class=XXX>Need to detail the expected <a id=the-input-element-as-domain-specific-widgets:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> and <a id=the-input-element-as-domain-specific-widgets:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive
  appearance</a>.</p>

  


  

  <h4 id=the-input-element-as-a-range-control><span class=secno>15.5.8</span> The <code id=the-input-element-as-a-range-control:the-input-element><a href=input.html#the-input-element>input</a></code> element as a range control<a href=#the-input-element-as-a-range-control class=self-link></a></h4>

  <p>An <code id=the-input-element-as-a-range-control:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-range-control:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#range-state-(type=range)" id="the-input-element-as-a-range-control:range-state-(type=range)">Range</a> state is a <a id=the-input-element-as-a-range-control:non-devolvable-widget href=https://drafts.csswg.org/css-ui/#non-devolvable data-x-internal=non-devolvable-widget>non-devolvable
  widget</a>. Its expected <a id=the-input-element-as-a-range-control:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> is to render as an
  <a id="the-input-element-as-a-range-control:'inline-block'" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting a slider control.</p>

  <p>When this control has a <a href=#horizontal-writing-mode id=the-input-element-as-a-range-control:horizontal-writing-mode>horizontal writing mode</a>, the control is expected to be a
  horizontal slider. Its lowest value is on the right if the <a id="the-input-element-as-a-range-control:'direction'" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a> property has a
  <a id=the-input-element-as-a-range-control:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of 'rtl', and on the left otherwise. When this control has a
  <a href=#vertical-writing-mode id=the-input-element-as-a-range-control:vertical-writing-mode>vertical writing mode</a>, it is expected to be a vertical slider. Its lowest value is on
  the bottom if the <a id="the-input-element-as-a-range-control:'direction'-2" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a> property has a <a id=the-input-element-as-a-range-control:computed-value-2 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of 'rtl', and
  on the top otherwise.</p>

  <p>Predefined suggested values (provided by the <code id=the-input-element-as-a-range-control:attr-input-list><a href=input.html#attr-input-list>list</a></code>
  attribute) are expected to be shown as tick marks on the slider, which the slider can snap to.</p>

  <p class=XXX>Need to detail the expected <a id=the-input-element-as-a-range-control:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive appearance</a>.</p>
  


  

  <h4 id=the-input-element-as-a-colour-well><span class=secno>15.5.9</span> The <code id=the-input-element-as-a-colour-well:the-input-element><a href=input.html#the-input-element>input</a></code> element as a color
  well<a href=#the-input-element-as-a-colour-well class=self-link></a></h4>

  <p>An <code id=the-input-element-as-a-colour-well:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-colour-well:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#color-state-(type=color)" id="the-input-element-as-a-colour-well:color-state-(type=color)">Color</a> state is expected to depict a color well,
  which, when activated, provides the user with a color picker (e.g. a color wheel or color
  palette) from which the color can be changed. The element, when it generates a <a id=the-input-element-as-a-colour-well:css-box href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS
  box</a>, is expected to use <a href=#button-layout-2 id=the-input-element-as-a-colour-well:button-layout-2>button layout</a>, that has no child boxes of the
  <a href=#anonymous-button-content-box id=the-input-element-as-a-colour-well:anonymous-button-content-box>anonymous button content box</a>. The <a href=#anonymous-button-content-box id=the-input-element-as-a-colour-well:anonymous-button-content-box-2>anonymous button content box</a> is
  expected to have a <a href=#presentational-hints id=the-input-element-as-a-colour-well:presentational-hints>presentational hint</a> setting the
  <a id="the-input-element-as-a-colour-well:'background-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-background-color data-x-internal="'background-color'">'background-color'</a> property to the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-input-element-as-a-colour-well:concept-fe-value>value</a>.</p>

  <p>Predefined suggested values (provided by the <code id=the-input-element-as-a-colour-well:attr-input-list><a href=input.html#attr-input-list>list</a></code>
  attribute) are expected to be shown in the color picker interface, not on the color well
  itself.</p>

  <p class=XXX>Need to detail the expected <a id=the-input-element-as-a-colour-well:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> and <a id=the-input-element-as-a-colour-well:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive
  appearance</a>.</p>

  


  

  <h4 id=the-input-element-as-a-checkbox-and-radio-button-widgets><span class=secno>15.5.10</span> The <code id=the-input-element-as-a-checkbox-and-radio-button-widgets:the-input-element><a href=input.html#the-input-element>input</a></code> element as a checkbox and radio button widgets<a href=#the-input-element-as-a-checkbox-and-radio-button-widgets class=self-link></a></h4>

  <p>An <code id=the-input-element-as-a-checkbox-and-radio-button-widgets:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-checkbox-and-radio-button-widgets:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#checkbox-state-(type=checkbox)" id="the-input-element-as-a-checkbox-and-radio-button-widgets:checkbox-state-(type=checkbox)">Checkbox</a> state is a <a id=the-input-element-as-a-checkbox-and-radio-button-widgets:non-devolvable-widget href=https://drafts.csswg.org/css-ui/#non-devolvable data-x-internal=non-devolvable-widget>non-devolvable
  widget</a> expected to render as an <a id="the-input-element-as-a-checkbox-and-radio-button-widgets:'inline-block'" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box containing a single
  checkbox control, with no label.</p>

  <p class=XXX>Need to detail the expected <a id=the-input-element-as-a-checkbox-and-radio-button-widgets:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> and <a id=the-input-element-as-a-checkbox-and-radio-button-widgets:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive
  appearance</a>.</p>

  <p>An <code id=the-input-element-as-a-checkbox-and-radio-button-widgets:the-input-element-3><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-checkbox-and-radio-button-widgets:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#radio-button-state-(type=radio)" id="the-input-element-as-a-checkbox-and-radio-button-widgets:radio-button-state-(type=radio)">Radio Button</a> state is a <a id=the-input-element-as-a-checkbox-and-radio-button-widgets:non-devolvable-widget-2 href=https://drafts.csswg.org/css-ui/#non-devolvable data-x-internal=non-devolvable-widget>non-devolvable
  widget</a> expected to render as an <a id="the-input-element-as-a-checkbox-and-radio-button-widgets:'inline-block'-2" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box containing a single radio
  button control, with no label.</p>

  <p class=XXX>Need to detail the expected <a id=the-input-element-as-a-checkbox-and-radio-button-widgets:native-appearance-2 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> and <a id=the-input-element-as-a-checkbox-and-radio-button-widgets:primitive-appearance-2 href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive
  appearance</a>.</p>

  


  

  <h4 id=the-input-element-as-a-file-upload-control><span class=secno>15.5.11</span> The <code id=the-input-element-as-a-file-upload-control:the-input-element><a href=input.html#the-input-element>input</a></code> element as a file upload control<a href=#the-input-element-as-a-file-upload-control class=self-link></a></h4>

  <p>An <code id=the-input-element-as-a-file-upload-control:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-file-upload-control:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#file-upload-state-(type=file)" id="the-input-element-as-a-file-upload-control:file-upload-state-(type=file)">File Upload</a> state, when it generates a <a id=the-input-element-as-a-file-upload-control:css-box href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS
  box</a>, is expected to render as an <a id="the-input-element-as-a-file-upload-control:'inline-block'" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box containing a span of text
  giving the filename(s) of the <a href=input.html#concept-input-type-file-selected id=the-input-element-as-a-file-upload-control:concept-input-type-file-selected>selected
  files</a>, if any, followed by a button that, when activated, provides the user with a file
  picker from which the selection can be changed. The button is expected to use <a href=#button-layout-2 id=the-input-element-as-a-file-upload-control:button-layout-2>button
  layout</a> and match the <a id="the-input-element-as-a-file-upload-control:'::file-selector-button'" href=https://drafts.csswg.org/css-pseudo/#file-selector-button-pseudo data-x-internal="'::file-selector-button'">'::file-selector-button'</a> pseudo-element. The contents of
  its <a href=#anonymous-button-content-box id=the-input-element-as-a-file-upload-control:anonymous-button-content-box>anonymous button content box</a> are expected to be
  <a id=the-input-element-as-a-file-upload-control:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> (and possibly locale-specific) text, for example "Choose
  file".</p>

  <p>User agents may handle an <code id=the-input-element-as-a-file-upload-control:the-input-element-3><a href=input.html#the-input-element>input</a></code> element whose
  <code id=the-input-element-as-a-file-upload-control:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute is in the
  <a href="input.html#file-upload-state-(type=file)" id="the-input-element-as-a-file-upload-control:file-upload-state-(type=file)-2">File Upload</a> state as an
  <a id=the-input-element-as-a-file-upload-control:element-with-default-preferred-size href=https://drafts.csswg.org/css-ui/#element-with-default-preferred-size data-x-internal=element-with-default-preferred-size>element with default preferred size</a>, and user agents may apply the
  <a id="the-input-element-as-a-file-upload-control:'field-sizing'" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a> CSS property to the element. If the <a id="the-input-element-as-a-file-upload-control:'field-sizing'-2" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a>
  property on the element has a <a id=the-input-element-as-a-file-upload-control:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of
  <a href=https://drafts.csswg.org/css-ui/#valdef-field-sizing-content id=the-input-element-as-a-file-upload-control:field-sizing-content data-x-internal=field-sizing-content>'content'</a>, the <a id=the-input-element-as-a-file-upload-control:intrinsic-size href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> of the
  element is expected to depend on its content such as the <a id="the-input-element-as-a-file-upload-control:'::file-selector-button'-2" href=https://drafts.csswg.org/css-pseudo/#file-selector-button-pseudo data-x-internal="'::file-selector-button'">'::file-selector-button'</a>
  pseudo-element and chosen file names.</p>

  


  

  <h4 id=the-input-element-as-a-button><span class=secno>15.5.12</span> The <code id=the-input-element-as-a-button:the-input-element><a href=input.html#the-input-element>input</a></code> element as a button<a href=#the-input-element-as-a-button class=self-link></a></h4>

  <p>An <code id=the-input-element-as-a-button:the-input-element-2><a href=input.html#the-input-element>input</a></code> element whose <code id=the-input-element-as-a-button:attr-input-type><a href=input.html#attr-input-type>type</a></code> attribute is in
  the <a href="input.html#submit-button-state-(type=submit)" id="the-input-element-as-a-button:submit-button-state-(type=submit)">Submit Button</a>, <a href="input.html#reset-button-state-(type=reset)" id="the-input-element-as-a-button:reset-button-state-(type=reset)">Reset Button</a>, or <a href="input.html#button-state-(type=button)" id="the-input-element-as-a-button:button-state-(type=button)">Button</a> state, when it generates a <a id=the-input-element-as-a-button:css-box href=https://drafts.csswg.org/css-display/#css-box data-x-internal=css-box>CSS box</a>, is
  expected to depict a button and use <a href=#button-layout-2 id=the-input-element-as-a-button:button-layout-2>button layout</a> and the contents of the
  <a href=#anonymous-button-content-box id=the-input-element-as-a-button:anonymous-button-content-box>anonymous button content box</a> are expected to be the text of the element's <code id=the-input-element-as-a-button:attr-input-value><a href=input.html#attr-input-value>value</a></code> attribute, if any, or text derived from the element's <code id=the-input-element-as-a-button:attr-input-type-2><a href=input.html#attr-input-type>type</a></code> attribute in an <a id=the-input-element-as-a-button:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> (and
  probably locale-specific) fashion, if not.</p>

  


  

  <h4 id=the-marquee-element-2><span class=secno>15.5.13</span> The <code id=the-marquee-element-2:the-marquee-element><a href=obsolete.html#the-marquee-element>marquee</a></code> element<a href=#the-marquee-element-2 class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>marquee </c-><c- p>{</c->
  <c- k>display</c-><c- p>:</c-> inline-block<c- p>;</c->
  <c- k>text-align</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>overflow</c-><c- p>:</c-> hidden !important;
}</code></pre>

  <p>The <code id=the-marquee-element-2:the-marquee-element-2><a href=obsolete.html#the-marquee-element>marquee</a></code> element, while <a href=obsolete.html#concept-marquee-on id=the-marquee-element-2:concept-marquee-on>turned on</a>, is
  expected to render in an animated fashion according to its attributes as follows:</p>

  <dl><dt>If the element's <code id=the-marquee-element-2:attr-marquee-behavior><a href=obsolete.html#attr-marquee-behavior>behavior</a></code> attribute is in the
   <a href=obsolete.html#attr-marquee-behavior-scroll id=the-marquee-element-2:attr-marquee-behavior-scroll>scroll</a> state<dd>
    <p>Slide the contents of the element in the direction described by the <code id=the-marquee-element-2:attr-marquee-direction><a href=obsolete.html#attr-marquee-direction>direction</a></code> attribute as defined below, such that it begins
    off the start side of the <code id=the-marquee-element-2:the-marquee-element-3><a href=obsolete.html#the-marquee-element>marquee</a></code>, and ends flush with the inner end side.</p>

    <p class=example>For example, if the <code id=the-marquee-element-2:attr-marquee-direction-2><a href=obsolete.html#attr-marquee-direction>direction</a></code>
    attribute is <a href=obsolete.html#attr-marquee-direction-left id=the-marquee-element-2:attr-marquee-direction-left>left</a> (the default), then the
    contents would start such that their left edge are off the side of the right edge of the
    <code id=the-marquee-element-2:the-marquee-element-4><a href=obsolete.html#the-marquee-element>marquee</a></code>'s <a id=the-marquee-element-2:content-area href=https://drafts.csswg.org/css-box/#content-area data-x-internal=content-area>content area</a>, and the contents would then slide up to the
    point where the left edge of the contents are flush with the left inner edge of the
    <code id=the-marquee-element-2:the-marquee-element-5><a href=obsolete.html#the-marquee-element>marquee</a></code>'s <a id=the-marquee-element-2:content-area-2 href=https://drafts.csswg.org/css-box/#content-area data-x-internal=content-area>content area</a>.</p>

    <p>Once the animation has ended, the user agent is expected to <a id=the-marquee-element-2:increment-the-marquee-current-loop-index href=obsolete.html#increment-the-marquee-current-loop-index>increment the marquee
    current loop index</a>. If the element is still <a href=obsolete.html#concept-marquee-on id=the-marquee-element-2:concept-marquee-on-2>turned
    on</a> after this, then the user agent is expected to restart the animation.</p>
   <dt>If the element's <code id=the-marquee-element-2:attr-marquee-behavior-2><a href=obsolete.html#attr-marquee-behavior>behavior</a></code> attribute is in the
   <a href=obsolete.html#attr-marquee-behavior-slide id=the-marquee-element-2:attr-marquee-behavior-slide>slide</a> state<dd>
    <p>Slide the contents of the element in the direction described by the <code id=the-marquee-element-2:attr-marquee-direction-3><a href=obsolete.html#attr-marquee-direction>direction</a></code> attribute as defined below, such that it begins
    off the start side of the <code id=the-marquee-element-2:the-marquee-element-6><a href=obsolete.html#the-marquee-element>marquee</a></code>, and ends off the end side of the
    <code id=the-marquee-element-2:the-marquee-element-7><a href=obsolete.html#the-marquee-element>marquee</a></code>.</p>

    <p class=example>For example, if the <code id=the-marquee-element-2:attr-marquee-direction-4><a href=obsolete.html#attr-marquee-direction>direction</a></code>
    attribute is <a href=obsolete.html#attr-marquee-direction-left id=the-marquee-element-2:attr-marquee-direction-left-2>left</a> (the default), then the
    contents would start such that their left edge are off the side of the right edge of the
    <code id=the-marquee-element-2:the-marquee-element-8><a href=obsolete.html#the-marquee-element>marquee</a></code>'s <a id=the-marquee-element-2:content-area-3 href=https://drafts.csswg.org/css-box/#content-area data-x-internal=content-area>content area</a>, and the contents would then slide up to the
    point where the <em>right</em> edge of the contents are flush with the left inner edge of the
    <code id=the-marquee-element-2:the-marquee-element-9><a href=obsolete.html#the-marquee-element>marquee</a></code>'s <a id=the-marquee-element-2:content-area-4 href=https://drafts.csswg.org/css-box/#content-area data-x-internal=content-area>content area</a>.</p>

    <p>Once the animation has ended, the user agent is expected to <a id=the-marquee-element-2:increment-the-marquee-current-loop-index-2 href=obsolete.html#increment-the-marquee-current-loop-index>increment the marquee
    current loop index</a>. If the element is still <a href=obsolete.html#concept-marquee-on id=the-marquee-element-2:concept-marquee-on-3>turned
    on</a> after this, then the user agent is expected to restart the animation.</p>
   <dt>If the element's <code id=the-marquee-element-2:attr-marquee-behavior-3><a href=obsolete.html#attr-marquee-behavior>behavior</a></code> attribute is in the
   <a href=obsolete.html#attr-marquee-behavior-alternate id=the-marquee-element-2:attr-marquee-behavior-alternate>alternate</a> state<dd>
    <p>When the <a id=the-marquee-element-2:marquee-current-loop-index href=obsolete.html#marquee-current-loop-index>marquee current loop index</a> is even (or zero), slide the contents of the
    element in the direction described by the <code id=the-marquee-element-2:attr-marquee-direction-5><a href=obsolete.html#attr-marquee-direction>direction</a></code>
    attribute as defined below, such that it begins flush with the start side of the
    <code id=the-marquee-element-2:the-marquee-element-10><a href=obsolete.html#the-marquee-element>marquee</a></code>, and ends flush with the end side of the <code id=the-marquee-element-2:the-marquee-element-11><a href=obsolete.html#the-marquee-element>marquee</a></code>.</p>

    <p>When the <a id=the-marquee-element-2:marquee-current-loop-index-2 href=obsolete.html#marquee-current-loop-index>marquee current loop index</a> is odd, slide the contents of the element in
    the opposite direction than that described by the <code id=the-marquee-element-2:attr-marquee-direction-6><a href=obsolete.html#attr-marquee-direction>direction</a></code> attribute as defined below, such that it begins
    flush with the end side of the <code id=the-marquee-element-2:the-marquee-element-12><a href=obsolete.html#the-marquee-element>marquee</a></code>, and ends flush with the start side of the
    <code id=the-marquee-element-2:the-marquee-element-13><a href=obsolete.html#the-marquee-element>marquee</a></code>.</p>

    <p class=example>For example, if the <code id=the-marquee-element-2:attr-marquee-direction-7><a href=obsolete.html#attr-marquee-direction>direction</a></code>
    attribute is <a href=obsolete.html#attr-marquee-direction-left id=the-marquee-element-2:attr-marquee-direction-left-3>left</a> (the default), then the
    contents would with their right edge flush with the right inner edge of the
    <code id=the-marquee-element-2:the-marquee-element-14><a href=obsolete.html#the-marquee-element>marquee</a></code>'s <a id=the-marquee-element-2:content-area-5 href=https://drafts.csswg.org/css-box/#content-area data-x-internal=content-area>content area</a>, and the contents would then slide up to the
    point where the <em>left</em> edge of the contents are flush with the left inner edge of the
    <code id=the-marquee-element-2:the-marquee-element-15><a href=obsolete.html#the-marquee-element>marquee</a></code>'s <a id=the-marquee-element-2:content-area-6 href=https://drafts.csswg.org/css-box/#content-area data-x-internal=content-area>content area</a>.</p>

    <p>Once the animation has ended, the user agent is expected to <a id=the-marquee-element-2:increment-the-marquee-current-loop-index-3 href=obsolete.html#increment-the-marquee-current-loop-index>increment the marquee
    current loop index</a>. If the element is still <a href=obsolete.html#concept-marquee-on id=the-marquee-element-2:concept-marquee-on-4>turned
    on</a> after this, then the user agent is expected to continue the animation.</p>
   </dl>

  <p>The <code id=the-marquee-element-2:attr-marquee-direction-8><a href=obsolete.html#attr-marquee-direction>direction</a></code> attribute has the meanings described
  in the following table:</p>

  <table><thead><tr><th><code id=the-marquee-element-2:attr-marquee-direction-9><a href=obsolete.html#attr-marquee-direction>direction</a></code> attribute state
     <th>Direction of animation
     <th>Start edge
     <th>End edge
     <th>Opposite direction
   <tbody><tr><td><a href=obsolete.html#attr-marquee-direction-left id=the-marquee-element-2:attr-marquee-direction-left-4>left</a>
     <td>← Right to left
     <td>Right
     <td>Left
     <td>→ Left to Right
    <tr><td><a href=obsolete.html#attr-marquee-direction-right id=the-marquee-element-2:attr-marquee-direction-right>right</a>
     <td>→ Left to Right
     <td>Left
     <td>Right
     <td>← Right to left
    <tr><td><a href=obsolete.html#attr-marquee-direction-up id=the-marquee-element-2:attr-marquee-direction-up>up</a>
     <td>↑ Up (Bottom to Top)
     <td>Bottom
     <td>Top
     <td>↓ Down (Top to Bottom)
    <tr><td><a href=obsolete.html#attr-marquee-direction-down id=the-marquee-element-2:attr-marquee-direction-down>down</a>
     <td>↓ Down (Top to Bottom)
     <td>Top
     <td>Bottom
     <td>↑ Up (Bottom to Top)
  </table>

  <p>In any case, the animation should proceed such that there is a delay given by the <a id=the-marquee-element-2:marquee-scroll-interval href=obsolete.html#marquee-scroll-interval>marquee
  scroll interval</a> between each frame, and such that the content moves at most the distance
  given by the <a id=the-marquee-element-2:marquee-scroll-distance href=obsolete.html#marquee-scroll-distance>marquee scroll distance</a> with each frame.</p>

  <p>When a <code id=the-marquee-element-2:the-marquee-element-16><a href=obsolete.html#the-marquee-element>marquee</a></code> element has a <code>bgcolor</code>
  attribute set, the value is expected to be parsed using the <a id=the-marquee-element-2:rules-for-parsing-a-legacy-colour-value href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy color
  value</a>, and if that does not return failure, the user agent is expected to treat the
  attribute as a <a href=#presentational-hints id=the-marquee-element-2:presentational-hints>presentational hint</a> setting the element's
  <a id="the-marquee-element-2:'background-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-background-color data-x-internal="'background-color'">'background-color'</a> property to the resulting color.</p>

  <p>The <code>width</code> and <code>height</code> attributes on a <code id=the-marquee-element-2:the-marquee-element-17><a href=obsolete.html#the-marquee-element>marquee</a></code> element
  <a href=#maps-to-the-dimension-property id=the-marquee-element-2:maps-to-the-dimension-property>map to the dimension properties</a>
  <a id="the-marquee-element-2:'width'" href=https://drafts.csswg.org/css2/#the-width-property data-x-internal="'width'">'width'</a> and <a id="the-marquee-element-2:'height'" href=https://drafts.csswg.org/css2/#the-height-property data-x-internal="'height'">'height'</a> on the element respectively.</p>

  <p>The <a id=the-marquee-element-2:natural-height href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a> of a <code id=the-marquee-element-2:the-marquee-element-18><a href=obsolete.html#the-marquee-element>marquee</a></code> element with its <code id=the-marquee-element-2:attr-marquee-direction-10><a href=obsolete.html#attr-marquee-direction>direction</a></code> attribute in the <a href=obsolete.html#attr-marquee-direction-up id=the-marquee-element-2:attr-marquee-direction-up-2>up</a> or <a href=obsolete.html#attr-marquee-direction-down id=the-marquee-element-2:attr-marquee-direction-down-2>down</a> states is 200 <a href=https://drafts.csswg.org/css-values/#px id="the-marquee-element-2:'px'" data-x-internal="'px'">CSS
  pixels</a>.</p>

  <p>The <code>vspace</code> attribute of a
  <code id=the-marquee-element-2:the-marquee-element-19><a href=obsolete.html#the-marquee-element>marquee</a></code> element <a href=#maps-to-the-dimension-property id=the-marquee-element-2:maps-to-the-dimension-property-2>maps to the dimension
  properties</a> <a id="the-marquee-element-2:'margin-top'" href=https://drafts.csswg.org/css-box/#propdef-margin-top data-x-internal="'margin-top'">'margin-top'</a> and <a id="the-marquee-element-2:'margin-bottom'" href=https://drafts.csswg.org/css-box/#propdef-margin-bottom data-x-internal="'margin-bottom'">'margin-bottom'</a> on the element. The
  <code>hspace</code> attribute of a <code id=the-marquee-element-2:the-marquee-element-20><a href=obsolete.html#the-marquee-element>marquee</a></code>
  element <a href=#maps-to-the-dimension-property id=the-marquee-element-2:maps-to-the-dimension-property-3>maps to the dimension properties</a>
  <a id="the-marquee-element-2:'margin-left'" href=https://drafts.csswg.org/css-box/#propdef-margin-left data-x-internal="'margin-left'">'margin-left'</a> and <a id="the-marquee-element-2:'margin-right'" href=https://drafts.csswg.org/css-box/#propdef-margin-right data-x-internal="'margin-right'">'margin-right'</a> on the element.</p>

  


  

  <h4 id=the-meter-element-2><span class=secno>15.5.14</span> The <code id=the-meter-element-2:the-meter-element><a href=form-elements.html#the-meter-element>meter</a></code> element<a href=#the-meter-element-2 class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>meter </c-><c- p>{</c-> <c- k>appearance</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c-></code></pre>

  <p>The <code id=the-meter-element-2:the-meter-element-2><a href=form-elements.html#the-meter-element>meter</a></code> element is a <a id=the-meter-element-2:devolvable-widget href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>. Its expected <a id=the-meter-element-2:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native
  appearance</a> is to render as an <a id="the-meter-element-2:'inline-block'" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box with a <a id="the-meter-element-2:'block-size'" href=https://drafts.csswg.org/css-logical/#propdef-block-size data-x-internal="'block-size'">'block-size'</a>
  of '1em' and a <a id="the-meter-element-2:'inline-size'" href=https://drafts.csswg.org/css-logical/#propdef-inline-size data-x-internal="'inline-size'">'inline-size'</a> of '5em', a <a id="the-meter-element-2:'vertical-align'" href=https://drafts.csswg.org/css2/#propdef-vertical-align data-x-internal="'vertical-align'">'vertical-align'</a> of '-0.2em', and
  with its contents depicting a gauge.</p>

  <p>When this element has a <a href=#horizontal-writing-mode id=the-meter-element-2:horizontal-writing-mode>horizontal writing mode</a>, the depiction is expected to be of
  a horizontal gauge. Its minimum value is on the right if the <a id="the-meter-element-2:'direction'" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a> property has
  a <a id=the-meter-element-2:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of 'rtl', and on the left otherwise. When this element has a
  <a href=#vertical-writing-mode id=the-meter-element-2:vertical-writing-mode>vertical writing mode</a>, it is expected to depict a vertical gauge. Its minimum value is
  on the bottom if the <a id="the-meter-element-2:'direction'-2" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a> property has a <a id=the-meter-element-2:computed-value-2 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of 'rtl',
  and on the top otherwise.</p>

  <p>User agents are expected to use a presentation consistent with platform conventions for gauges,
  if any.</p>

  <p class=note>Requirements for what must be depicted in the gauge are
  included in the definition of the <code id=the-meter-element-2:the-meter-element-3><a href=form-elements.html#the-meter-element>meter</a></code> element.</p>

  <p class=XXX>Need to detail the expected <a id=the-meter-element-2:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive appearance</a>.</p>

  


  

  <h4 id=the-progress-element-2><span class=secno>15.5.15</span> The <code id=the-progress-element-2:the-progress-element><a href=form-elements.html#the-progress-element>progress</a></code> element<a href=#the-progress-element-2 class=self-link></a></h4>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>progress </c-><c- p>{</c-> <c- k>appearance</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c-></code></pre>

  <p>The <code id=the-progress-element-2:the-progress-element-2><a href=form-elements.html#the-progress-element>progress</a></code> element is a <a id=the-progress-element-2:devolvable-widget href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>. Its expected
  <a id=the-progress-element-2:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> is to render as an <a id="the-progress-element-2:'inline-block'" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box with a
  <a id="the-progress-element-2:'block-size'" href=https://drafts.csswg.org/css-logical/#propdef-block-size data-x-internal="'block-size'">'block-size'</a> of '1em' and a <a id="the-progress-element-2:'inline-size'" href=https://drafts.csswg.org/css-logical/#propdef-inline-size data-x-internal="'inline-size'">'inline-size'</a> of '10em', and a
  <a id="the-progress-element-2:'vertical-align'" href=https://drafts.csswg.org/css2/#propdef-vertical-align data-x-internal="'vertical-align'">'vertical-align'</a> of '-0.2em'.</p>

  

  <p> <img class=extra width=276 src=../images/sample-progress.png height=115 alt=""> When this
  element has a <a href=#horizontal-writing-mode id=the-progress-element-2:horizontal-writing-mode>horizontal writing mode</a>, the element is expected to be depicted as a
  horizontal progress bar. The start is on the right and the end is on the left if the
  <a id="the-progress-element-2:'direction'" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a> property on this element has a <a id=the-progress-element-2:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of 'rtl', and
  with the start on the left and the end on the right otherwise. When this element has a
  <a href=#vertical-writing-mode id=the-progress-element-2:vertical-writing-mode>vertical writing mode</a>, it is expected to be depicted as a vertical progress bar. The
  start is on the bottom and the end is on the top if the <a id="the-progress-element-2:'direction'-2" href=https://drafts.csswg.org/css-writing-modes/#direction data-x-internal="'direction'">'direction'</a> property on this
  element has a <a id=the-progress-element-2:computed-value-2 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of 'rtl', and with the start on the top and the end on
  the bottom otherwise.</p>

  <p>User agents are expected to use a presentation consistent with platform conventions for
  progress bars. In particular, user agents are expected to use different presentations for
  determinate and indeterminate progress bars. User agents are also expected to vary the
  presentation based on the dimensions of the element.</p>

  <p class=note>Requirements for how to determine if the progress bar is determinate or
  indeterminate, and what progress a determinate progress bar is to show, are included in the
  definition of the <code id=the-progress-element-2:the-progress-element-3><a href=form-elements.html#the-progress-element>progress</a></code> element.</p>

  <p class=XXX>Need to detail the expected <a id=the-progress-element-2:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive appearance</a>.</p>

  


  

  <h4 id=the-select-element-2><span class=secno>15.5.16</span> The <code id=the-select-element-2:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element<a href=#the-select-element-2 class=self-link></a></h4>

  <p>The <code id=the-select-element-2:the-select-element-2><a href=form-elements.html#the-select-element>select</a></code> element is an <a id=the-select-element-2:element-with-default-preferred-size href=https://drafts.csswg.org/css-ui/#element-with-default-preferred-size data-x-internal=element-with-default-preferred-size>element with default preferred size</a>, and
  user agents are expected to apply the <a id="the-select-element-2:'field-sizing'" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a> CSS property to
  <code id=the-select-element-2:the-select-element-3><a href=form-elements.html#the-select-element>select</a></code> elements.

  <p>A <code id=the-select-element-2:the-select-element-4><a href=form-elements.html#the-select-element>select</a></code> element is either a <dfn data-dfn-for=select id=list-box data-export="">list box</dfn> or a <dfn data-dfn-for=select id=drop-down-box data-export="">drop-down box</dfn>, depending on its attributes.</p>

  <p>A <code id=the-select-element-2:the-select-element-5><a href=form-elements.html#the-select-element>select</a></code> element whose <code id=the-select-element-2:attr-select-multiple><a href=form-elements.html#attr-select-multiple>multiple</a></code>
  attribute is present is expected to render as a multi-select <a href=#list-box id=the-select-element-2:list-box>list box</a>.</p>

  <p>A <code id=the-select-element-2:the-select-element-6><a href=form-elements.html#the-select-element>select</a></code> element whose <code id=the-select-element-2:attr-select-multiple-2><a href=form-elements.html#attr-select-multiple>multiple</a></code>
  attribute is absent, and whose <a href=form-elements.html#concept-select-size id=the-select-element-2:concept-select-size>display size</a> is greater
  than 1, is expected to render as a single-select <a href=#list-box id=the-select-element-2:list-box-2>list box</a>.</p>

  <p>When the element renders as a <a href=#list-box id=the-select-element-2:list-box-3>list box</a>, it is a <a id=the-select-element-2:devolvable-widget href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a>
  expected to render as an <a id="the-select-element-2:'inline-block'" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box. The <a id=the-select-element-2:inline-size href=https://drafts.csswg.org/css-writing-modes/#inline-size data-x-internal=inline-size>inline size</a> of its
  <a id=the-select-element-2:intrinsic-size href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> is the <a href="#width-of-the-select's-labels" id="the-select-element-2:width-of-the-select's-labels">width of the <code>select</code>'s labels</a> plus
  the width of a scrollbar. The <a id=the-select-element-2:block-size href=https://drafts.csswg.org/css-writing-modes/#block-size data-x-internal=block-size>block size</a> of its <a id=the-select-element-2:intrinsic-size-2 href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> is
  determined by the following steps:</p>

  <ol><li>
    <p>If the <a id="the-select-element-2:'field-sizing'-2" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a> property on the element has a <a id=the-select-element-2:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a>
    of <a href=https://drafts.csswg.org/css-ui/#valdef-field-sizing-content id=the-select-element-2:field-sizing-content data-x-internal=field-sizing-content>'content'</a>, return the height necessary to contain
    all rows for items.</p>
   <li>
    <p>If the <code id=the-select-element-2:attr-select-size><a href=form-elements.html#attr-select-size>size</a></code> attribute is absent or it has no valid
    value, return the height necessary to contain four rows.</p>
   <li>
    <p>Otherwise, return the height necessary to contain as many rows for items as given by the
    element's <a href=form-elements.html#concept-select-size id=the-select-element-2:concept-select-size-2>display size</a>.</p>
   </ol>

  <p>A <code id=the-select-element-2:the-select-element-7><a href=form-elements.html#the-select-element>select</a></code> element whose <code id=the-select-element-2:attr-select-multiple-3><a href=form-elements.html#attr-select-multiple>multiple</a></code>
  attribute is absent, and whose <a href=form-elements.html#concept-select-size id=the-select-element-2:concept-select-size-3>display size</a> is 1, is
  expected to render as an <a id="the-select-element-2:'inline-block'-2" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> one-line <a href=#drop-down-box id=the-select-element-2:drop-down-box>drop-down box</a>.
  The <a id=the-select-element-2:inline-size-2 href=https://drafts.csswg.org/css-writing-modes/#inline-size data-x-internal=inline-size>inline size</a> of its <a id=the-select-element-2:intrinsic-size-3 href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> is the
  <a href="#width-of-the-select's-labels" id="the-select-element-2:width-of-the-select's-labels-2">width of the <code>select</code>'s labels</a>. If the <a id="the-select-element-2:'field-sizing'-3" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a>
  property on the element has a <a id=the-select-element-2:computed-value-2 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of
  <a href=https://drafts.csswg.org/css-ui/#valdef-field-sizing-content id=the-select-element-2:field-sizing-content-2 data-x-internal=field-sizing-content>'content'</a>, the <a id=the-select-element-2:inline-size-3 href=https://drafts.csswg.org/css-writing-modes/#inline-size data-x-internal=inline-size>inline size</a> of the
  <a id=the-select-element-2:intrinsic-size-4 href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> depends on the shown text. The shown text is typically the label of
  an <code id=the-select-element-2:the-option-element><a href=form-elements.html#the-option-element>option</a></code> of which <a href=form-elements.html#concept-option-selectedness id=the-select-element-2:concept-option-selectedness>selectedness</a> is
  set to true.</p>

  <p>When the element renders as a <a href=#drop-down-box id=the-select-element-2:drop-down-box-2>drop-down box</a>, it is a <a id=the-select-element-2:devolvable-widget-2 href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable
  widget</a>. Its appearance in the devolved state, as well as its appearance when the
  <a id=the-select-element-2:computed-value-3 href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a> of the element's <a id="the-select-element-2:'appearance'" href=https://drafts.csswg.org/css-ui/#appearance-switching data-x-internal="'appearance'">'appearance'</a> property is
  <code id="the-select-element-2:'menulist-button'"><a data-x-internal="'menulist-button'" href=https://drafts.csswg.org/css-ui/#valdef-appearance-menulist-button>'menulist-button'</a></code>, is that of a drop-down box, including a "drop-down button",
  but not necessarily rendered using a native control of the host operating system. In such a state,
  CSS properties such as <a id="the-select-element-2:'color'" href=https://drafts.csswg.org/css-color/#the-color-property data-x-internal="'color'">'color'</a>, <a id="the-select-element-2:'background-color'" href=https://drafts.csswg.org/css-backgrounds/#propdef-background-color data-x-internal="'background-color'">'background-color'</a>, and 'border' should
  not be disregarded (as is generally permissible when rendering an element according to its
  <a id=the-select-element-2:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a>).</p>

  <p>In either case (<a href=#list-box id=the-select-element-2:list-box-4>list box</a> or <a href=#drop-down-box id=the-select-element-2:drop-down-box-3>drop-down box</a>), the element's items are
  expected to be the element's <a href=form-elements.html#concept-select-option-list id=the-select-element-2:concept-select-option-list>list of options</a>,
  with the element's <code id=the-select-element-2:the-optgroup-element><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element <a href=https://dom.spec.whatwg.org/#concept-tree-child id=the-select-element-2:concept-tree-child data-x-internal=concept-tree-child>children</a>
  providing headers for groups of options where applicable.</p>

  <p><code id=the-select-element-2:the-select-element-8><a href=form-elements.html#the-select-element>select</a></code> elements which render as a <a href=#drop-down-box id=the-select-element-2:drop-down-box-4>drop-down box</a> support a <a id=the-select-element-2:base-appearance href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base
  appearance</a> in addition to <a id=the-select-element-2:native-appearance-2 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> and <a id=the-select-element-2:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive
  appearance</a>.</p>

  <p>The <code id=the-select-element-2:the-select-element-9><a href=form-elements.html#the-select-element>select</a></code> element's <a href=#select-popover id=the-select-element-2:select-popover>select popover</a> supports a <a id=the-select-element-2:base-appearance-2 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base
  appearance</a> and a <a id=the-select-element-2:native-appearance-3 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a>. The <a href=#select-popover id=the-select-element-2:select-popover-2>select popover</a> can only
  be rendered with <a id=the-select-element-2:base-appearance-3 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base appearance</a> if its associated <code id=the-select-element-2:the-select-element-10><a href=form-elements.html#the-select-element>select</a></code> is being
  rendered with <a id=the-select-element-2:base-appearance-4 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base appearance</a>.</p>

  <p>When a <code id=the-select-element-2:the-select-element-11><a href=form-elements.html#the-select-element>select</a></code> is being rendered as a <a href=#drop-down-box id=the-select-element-2:drop-down-box-5>drop-down box</a> with <a id=the-select-element-2:base-appearance-5 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base
  appearance</a>, it is expected to render with a <a id=the-select-element-2:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a> that contains the
  following elements:</p>

  <ol><li><p>A <dfn id=select-button-slot>select button slot</dfn>, which is a <code id=the-select-element-2:the-slot-element><a href=scripting.html#the-slot-element>slot</a></code> element. It is appended to
   the <code id=the-select-element-2:the-select-element-12><a href=form-elements.html#the-select-element>select</a></code>'s <a id=the-select-element-2:shadow-root href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a> as the first child. It is expected to take the
   first child element of the <code id=the-select-element-2:the-select-element-13><a href=form-elements.html#the-select-element>select</a></code> if the first child element is a
   <code id=the-select-element-2:the-button-element><a href=form-elements.html#the-button-element>button</a></code>, otherwise the <a href=#select-fallback-button-text id=the-select-element-2:select-fallback-button-text>select fallback button text</a>.<li><p>A <dfn id=select-fallback-button-text>select fallback button text</dfn>, which is a <code id=the-select-element-2:the-div-element><a href=grouping-content.html#the-div-element>div</a></code> element. It is
   appended to the <a href=#select-button-slot id=the-select-element-2:select-button-slot>select button slot</a>.<li><p>A <dfn id=select-popover>select popover</dfn>, which is a <code id=the-select-element-2:the-div-element-2><a href=grouping-content.html#the-div-element>div</a></code> element. It is appended to the
   <code id=the-select-element-2:the-select-element-14><a href=form-elements.html#the-select-element>select</a></code>'s <a id=the-select-element-2:shadow-root-2 href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a> as the second child, after the <a href=#select-button-slot id=the-select-element-2:select-button-slot-2>select button
   slot</a>. The <code id=the-select-element-2:the-select-element-15><a href=form-elements.html#the-select-element>select</a></code> element's <a id="the-select-element-2:'::picker'" href=https://drafts.csswg.org/css-forms/#the-picker-pseudo-element data-x-internal="'::picker'">'::picker'</a> pseudo-element is the
   <a href=#select-popover id=the-select-element-2:select-popover-3>select popover</a>.<li><p>A <dfn id=select-popover-slot>select popover slot</dfn>, which is a <code id=the-select-element-2:the-slot-element-2><a href=scripting.html#the-slot-element>slot</a></code> element. It is appended to
   the <a href=#select-popover id=the-select-element-2:select-popover-4>select popover</a>. It is expected to take all child nodes of the
   <code id=the-select-element-2:the-select-element-16><a href=form-elements.html#the-select-element>select</a></code> except for the first child <code id=the-select-element-2:the-button-element-2><a href=form-elements.html#the-button-element>button</a></code>, which is taken by the
   <code id=the-select-element-2:select-button-slot-3><a href=#select-button-slot>select button slot</a></code>.</ol>

  <p class=note>Since <a id=the-select-element-2:base-appearance-6 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base appearance</a> is determined by computing style, it isn't
  possible to swap this DOM structure when switching appearance. Implementations can always include
  the DOM structure for <a id=the-select-element-2:base-appearance-7 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base appearance</a> when the <code id=the-select-element-2:the-select-element-17><a href=form-elements.html#the-select-element>select</a></code> is rendered as a
  <a href=#drop-down-box id=the-select-element-2:drop-down-box-6>drop-down box</a> and then choose to include or exclude it from the layout tree in order
  to control whether it gets rendered or not.</p>

  <p class=note>The <a href=#select-popover id=the-select-element-2:select-popover-5>select popover</a> is only rendered when it is opted in to <a id=the-select-element-2:base-appearance-8 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base
  appearance</a> separately from the <code id=the-select-element-2:the-select-element-18><a href=form-elements.html#the-select-element>select</a></code> element. Otherwise, a native picker is
  used.</p>

  <p>The <a href=#select-popover id=the-select-element-2:select-popover-6>select popover</a>'s <a id=the-select-element-2:implicit-anchor-element href=https://drafts.csswg.org/css-anchor-position/#implicit-anchor-element data-x-internal=implicit-anchor-element>implicit anchor element</a> is its associated
  <code id=the-select-element-2:the-select-element-19><a href=form-elements.html#the-select-element>select</a></code> element.</p>

  <p>When a <code id=the-select-element-2:the-select-element-20><a href=form-elements.html#the-select-element>select</a></code> element is being rendered with <a id=the-select-element-2:native-appearance-4 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> or
  <a id=the-select-element-2:primitive-appearance-2 href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive appearance</a>, the <a id="the-select-element-2:'::picker'-2" href=https://drafts.csswg.org/css-forms/#the-picker-pseudo-element data-x-internal="'::picker'">'::picker'</a> pseudo-element and the
  <a id="the-select-element-2:'::picker-icon'" href=https://drafts.csswg.org/css-forms/#picker-opener-icon-the-picker-icon-pseudo-element data-x-internal="'::picker-icon'">'::picker-icon'</a> pseudo-element do not apply.</p>

  <p>The <a id="the-select-element-2:'::picker'-3" href=https://drafts.csswg.org/css-forms/#the-picker-pseudo-element data-x-internal="'::picker'">'::picker'</a> pseudo-element is not rendered when it has <a id=the-select-element-2:native-appearance-5 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native
  appearance</a> or <a id=the-select-element-2:primitive-appearance-3 href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive appearance</a>.</p>

  <p>The <a id="the-select-element-2:'::checkmark'" href=https://drafts.csswg.org/css-forms/#selectordef-checkmark data-x-internal="'::checkmark'">'::checkmark'</a> pseudo-element only applies to <code id=the-select-element-2:the-option-element-2><a href=form-elements.html#the-option-element>option</a></code> elements
  which are inside a <code id=the-select-element-2:the-select-element-21><a href=form-elements.html#the-select-element>select</a></code> element with <a id=the-select-element-2:base-appearance-9 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base appearance</a> whose
  <a id="the-select-element-2:'::picker'-4" href=https://drafts.csswg.org/css-forms/#the-picker-pseudo-element data-x-internal="'::picker'">'::picker'</a> pseudo-element has <a id=the-select-element-2:base-appearance-10 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base appearance</a>.</p>

  <p>An <code id=the-select-element-2:the-optgroup-element-2><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element is expected to be rendered by displaying the element's <code id=the-select-element-2:attr-optgroup-label><a href=form-elements.html#attr-optgroup-label>label</a></code> attribute.</p>

  <p>An <code id=the-select-element-2:the-option-element-3><a href=form-elements.html#the-option-element>option</a></code> element is expected to be rendered by displaying the result of
  <a id=the-select-element-2:collect-option-text href=form-elements.html#collect-option-text>collect option text</a> given the <code id=the-select-element-2:the-option-element-4><a href=form-elements.html#the-option-element>option</a></code> and true, indented under its
  <code id=the-select-element-2:the-optgroup-element-3><a href=form-elements.html#the-optgroup-element>optgroup</a></code> element if it has one. If the <code id=the-select-element-2:the-option-element-5><a href=form-elements.html#the-option-element>option</a></code> is in a
  <code id=the-select-element-2:the-select-element-22><a href=form-elements.html#the-select-element>select</a></code> which is being rendered as a <a href=#drop-down-box id=the-select-element-2:drop-down-box-7>drop-down box</a> with <a id=the-select-element-2:base-appearance-11 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base
  appearance</a>, and the <code id=the-select-element-2:the-select-element-23><a href=form-elements.html#the-select-element>select</a></code>'s <a href=#select-popover id=the-select-element-2:select-popover-7>select popover</a> is being rendered
  with <a id=the-select-element-2:base-appearance-12 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base appearance</a>, and the <code id=the-select-element-2:the-option-element-6><a href=form-elements.html#the-option-element>option</a></code>'s <code id=the-select-element-2:attr-option-label><a href=form-elements.html#attr-option-label>label</a></code> attribute is not set, then the <code id=the-select-element-2:the-option-element-7><a href=form-elements.html#the-option-element>option</a></code> is
  expected to render all of its children rather than by displaying its <a href=form-elements.html#concept-option-label id=the-select-element-2:concept-option-label>label</a>.</p>

  <p>Each sequence of one or more child <code id=the-select-element-2:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code> element siblings may be rendered as a single
  separator.</p>

  <p>The <dfn id="width-of-the-select's-labels">width of the <code>select</code>'s labels</dfn> is the wider of the width necessary to
  render the widest <code id=the-select-element-2:the-optgroup-element-4><a href=form-elements.html#the-optgroup-element>optgroup</a></code>, and the width necessary to render the widest
  <code id=the-select-element-2:the-option-element-8><a href=form-elements.html#the-option-element>option</a></code> element in the element's <a href=form-elements.html#concept-select-option-list id=the-select-element-2:concept-select-option-list-2>list of
  options</a> (including its indent, if any).</p>

  <p>If a <code id=the-select-element-2:the-select-element-24><a href=form-elements.html#the-select-element>select</a></code> element contains a <a id=the-select-element-2:placeholder-label-option href=form-elements.html#placeholder-label-option>placeholder label option</a>, the user
  agent is expected to render that <code id=the-select-element-2:the-option-element-9><a href=form-elements.html#the-option-element>option</a></code> in a manner that conveys that it is a label,
  rather than a valid option of the control. This can include preventing the <a id=the-select-element-2:placeholder-label-option-2 href=form-elements.html#placeholder-label-option>placeholder label
  option</a> from being explicitly selected by the user. When the <a id=the-select-element-2:placeholder-label-option-3 href=form-elements.html#placeholder-label-option>placeholder label
  option</a>'s <a href=form-elements.html#concept-option-selectedness id=the-select-element-2:concept-option-selectedness-2>selectedness</a> is true, the control
  is expected to be displayed in a fashion that indicates that no valid option is currently
  selected.</p>

  <p>User agents are expected to render the labels in a <code id=the-select-element-2:the-select-element-25><a href=form-elements.html#the-select-element>select</a></code> in such a manner that
  any alignment remains consistent whether the label is being displayed as part of the page or in a
  menu control.</p>

  <p class=XXX>Need to detail the expected <a id=the-select-element-2:native-appearance-6 href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> and <a id=the-select-element-2:primitive-appearance-4 href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive
  appearance</a>.</p>

  

  <p>The following styles are expected to apply to <code id=the-select-element-2:the-select-element-26><a href=form-elements.html#the-select-element>select</a></code> elements when they are being
  rendered as a <a href=#drop-down-box id=the-select-element-2:drop-down-box-8>drop-down box</a> with <a id=the-select-element-2:base-appearance-13 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base appearance</a>:</p>

  <pre><code class='css'><c- n>@namespace</c-> <c- s>&quot;http://www.w3.org/1999/xhtml&quot;</c-><c- p>;</c->

<c- f>select </c-><c- p>{</c->
  <c- k>text-transform</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>text-align</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>text-indent</c-><c- p>:</c-> initial<c- p>;</c->
  <c- k>background-color</c-><c- p>:</c-> transparent<c- p>;</c->
  <c- k>border</c-><c- p>:</c-> <c- m>1</c-><c- l>px</c-> solid currentColor<c- p>;</c->
  <c- k>padding-block</c-><c- p>:</c-> <c- m>0.25</c-><c- l>em</c-><c- p>;</c->
  <c- k>padding-inline</c-><c- p>:</c-> <c- m>0.5</c-><c- l>em</c-><c- p>;</c->
  <c- k>min-block-size</c-><c- p>:</c-> <c- nf>calc-size</c-><c- p>(</c->auto<c- p>,</c-> <c- nf>max</c-><c- p>(</c->size<c- p>,</c-> <c- m>24</c-><c- l>px</c-><c- p>,</c-> <c- m>1</c-><c- l>lh</c-><c- p>));</c->
  <c- k>min-inline-size</c-><c- p>:</c-> <c- nf>calc-size</c-><c- p>(</c->auto<c- p>,</c-> <c- nf>max</c-><c- p>(</c->size<c- p>,</c-> <c- m>24</c-><c- l>px</c-><c- p>));</c->
  <c- k>display</c-><c- p>:</c-> inline-flex<c- p>;</c->
  <c- k>gap</c-><c- p>:</c-> <c- m>0.5</c-><c- l>em</c-><c- p>;</c->
  <c- k>border-radius</c-><c- p>:</c-> <c- m>0.5</c-><c- l>em</c-><c- p>;</c->
  <c- k>user-select</c-><c- p>:</c-> none<c- p>;</c->
  <c- k>box-sizing</c-><c- p>:</c-> border-box<c- p>;</c->
  <c- k>field-sizing</c-><c- p>:</c-> content !important;
}

select &gt; button:first-child {
  all: unset;
  display: contents;
}

select:enabled:hover,
select option:enabled:hover {
  background-color: color-mix(in lab, currentColor 10%, transparent);
}
select:enabled:active,
select option:enabled:active {
  background-color: color-mix(in lab, currentColor 20%, transparent);
}
select:disabled,
select option:disabled {
  color: color-mix(in lab, currentColor 50%, transparent);
}

::picker(select) {
  box-sizing: border-box;
  border: 1px solid;
  padding: 0;
  color: CanvasText;
  background-color: Canvas;
  margin: 0;
  inset: auto;
  min-inline-size: anchor-size(self-inline);
  max-block-size: stretch;
  overflow: auto;
  position-area: block-end span-inline-end;
  position-try-order: most-block-size;
  position-try-fallbacks:
    block-start span-inline-end,
    block-end span-inline-start,
    block-start span-inline-start;
}

select option {
  min-inline-size: 24px;
  min-block-size: max(24px, 1lh);
  padding-inline: 0.5em;
  padding-block-end: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}

select option::checkmark {
  content: &apos;\2713&apos; / &apos;&apos;;
}
select option:not(:checked)::checkmark {
  visibility: hidden;
}

select::picker-icon {
  content: counter(fake-counter-name, disclosure-open);
  display: block;
  margin-inline-start: auto;
}

select optgroup {
  font-weight: bolder;
}

select optgroup option {
  font-weight: normal;
}

select optgroup legend {
  padding-inline: 0.5em;
  min-block-size: 1lh;
}</code></pre>

  

  <h4 id=the-textarea-element-2><span class=secno>15.5.17</span> The <code id=the-textarea-element-2:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code> element<a href=#the-textarea-element-2 class=self-link></a></h4>

  <p>The <code id=the-textarea-element-2:the-textarea-element-2><a href=form-elements.html#the-textarea-element>textarea</a></code> element is a <a id=the-textarea-element-2:devolvable-widget href=https://drafts.csswg.org/css-ui/#devolvable data-x-internal=devolvable-widget>devolvable widget</a> expected to render as an
  <a id="the-textarea-element-2:'inline-block'" href=https://drafts.csswg.org/css2/#value-def-inline-block data-x-internal="'inline-block'">'inline-block'</a> box depicting a multiline text control. If this multiline text control
  provides a selection, then, when the user changes the current selection, the user agent is
  expected to <a id=the-textarea-element-2:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=the-textarea-element-2:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task source</a>
  given the <code id=the-textarea-element-2:the-textarea-element-3><a href=form-elements.html#the-textarea-element>textarea</a></code> element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-textarea-element-2:concept-event-fire data-x-internal=concept-event-fire>fire an event</a>
  named <code id=the-textarea-element-2:event-select><a href=indices.html#event-select>select</a></code> at the element, with the <code id=the-textarea-element-2:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true.</p>

  <p>The <code id=the-textarea-element-2:the-textarea-element-4><a href=form-elements.html#the-textarea-element>textarea</a></code> element is an <a id=the-textarea-element-2:element-with-default-preferred-size href=https://drafts.csswg.org/css-ui/#element-with-default-preferred-size data-x-internal=element-with-default-preferred-size>element with default preferred size</a>, and
  user agents are expected to apply the <a id="the-textarea-element-2:'field-sizing'" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a> CSS property to
  <code id=the-textarea-element-2:the-textarea-element-5><a href=form-elements.html#the-textarea-element>textarea</a></code> elements.

  <p>If the <a id="the-textarea-element-2:'field-sizing'-2" href=https://drafts.csswg.org/css-ui/#field-sizing data-x-internal="'field-sizing'">'field-sizing'</a> property on the element has a <a id=the-textarea-element-2:computed-value href=https://drafts.csswg.org/css-cascade/#computed-value data-x-internal=computed-value>computed value</a>
  of <a href=https://drafts.csswg.org/css-ui/#valdef-field-sizing-content id=the-textarea-element-2:field-sizing-content data-x-internal=field-sizing-content>'content'</a>, the <a id=the-textarea-element-2:intrinsic-size href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> is
  determined from the text which the element shows. The text is either a
  <a href=form-elements.html#concept-textarea-raw-value id=the-textarea-element-2:concept-textarea-raw-value>raw value</a> or a short hint specified by the
  <code id=the-textarea-element-2:attr-textarea-placeholder><a href=form-elements.html#attr-textarea-placeholder>placeholder</a></code> attribute. User agents may take the
  text caret size into account in the <a id=the-textarea-element-2:intrinsic-size-2 href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a>. Otherwise, its
  <a id=the-textarea-element-2:intrinsic-size-3 href=https://drafts.csswg.org/css-sizing/#intrinsic-size data-x-internal=intrinsic-size>intrinsic size</a> is computed from <a href=#textarea-effective-width id=the-textarea-element-2:textarea-effective-width>textarea effective width</a> and
  <a href=#textarea-effective-height id=the-textarea-element-2:textarea-effective-height>textarea effective height</a> (as defined below).</p>

  <p>The <dfn id=textarea-effective-width>textarea effective width</dfn> of a <code id=the-textarea-element-2:the-textarea-element-6><a href=form-elements.html#the-textarea-element>textarea</a></code> element is <span><var>size</var>×<var>avg</var> + <var>sbw</var></span>, where
  <var>size</var> is the element's <a href=form-elements.html#attr-textarea-cols-value id=the-textarea-element-2:attr-textarea-cols-value>character width</a>,
  <var>avg</var> is the average character width of the primary font of the element, in <a href=https://drafts.csswg.org/css-values/#px id="the-textarea-element-2:'px'" data-x-internal="'px'">CSS pixels</a>, and <var>sbw</var> is the width of a scrollbar, in <a href=https://drafts.csswg.org/css-values/#px id="the-textarea-element-2:'px'-2" data-x-internal="'px'">CSS pixels</a>. (The element's <a id="the-textarea-element-2:'letter-spacing'" href=https://drafts.csswg.org/css-text/#letter-spacing-property data-x-internal="'letter-spacing'">'letter-spacing'</a> property does not
  affect the result.)</p>

  <p>The <dfn id=textarea-effective-height>textarea effective height</dfn> of a <code id=the-textarea-element-2:the-textarea-element-7><a href=form-elements.html#the-textarea-element>textarea</a></code> element is the height in
  <a href=https://drafts.csswg.org/css-values/#px id="the-textarea-element-2:'px'-3" data-x-internal="'px'">CSS pixels</a> of the number of lines given by the element's <a href=form-elements.html#attr-textarea-rows-value id=the-textarea-element-2:attr-textarea-rows-value>character height</a>, plus the height of a scrollbar in <a href=https://drafts.csswg.org/css-values/#px id="the-textarea-element-2:'px'-4" data-x-internal="'px'">CSS pixels</a>.</p>

  <p>User agents are expected to apply the <a id="the-textarea-element-2:'white-space'" href=https://drafts.csswg.org/css-text/#white-space-property data-x-internal="'white-space'">'white-space'</a> CSS property to
  <code id=the-textarea-element-2:the-textarea-element-8><a href=form-elements.html#the-textarea-element>textarea</a></code> elements. For historical reasons, if the element has a <code id=the-textarea-element-2:attr-textarea-wrap><a href=form-elements.html#attr-textarea-wrap>wrap</a></code> attribute whose value is an <a id=the-textarea-element-2:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> match for the string "<code>off</code>", then the user agent is expected to treat the attribute as a <a href=#presentational-hints id=the-textarea-element-2:presentational-hints>presentational hint</a> setting the element's
  <a id="the-textarea-element-2:'white-space'-2" href=https://drafts.csswg.org/css-text/#white-space-property data-x-internal="'white-space'">'white-space'</a> property to 'pre'.</p>

  <p class=XXX>Need to detail the expected <a id=the-textarea-element-2:native-appearance href=https://drafts.csswg.org/css-ui/#native-appearance data-x-internal=native-appearance>native appearance</a> and <a id=the-textarea-element-2:primitive-appearance href=https://drafts.csswg.org/css-ui/#primitive-appearance data-x-internal=primitive-appearance>primitive
  appearance</a>.</p>

  



  

  <h3 id=frames-and-framesets><span class=secno>15.6</span> Frames and framesets<a href=#frames-and-framesets class=self-link></a></h3>

  <p>User agents are expected to render <code id=frames-and-framesets:frameset><a href=obsolete.html#frameset>frameset</a></code> elements as a box with the height and
  width of the <a id=frames-and-framesets:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>, with a surface rendered according to the following layout
  algorithm:</p>

  <ol><li>
    <p>The <var>cols</var> and <var>rows</var> variables are lists of zero or more pairs consisting
    of a number and a unit, the unit being one of <i>percentage</i>, <i>relative</i>, and
    <i>absolute</i>.</p>

    <p>Use the <a id=frames-and-framesets:rules-for-parsing-a-list-of-dimensions href=common-microsyntaxes.html#rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</a> to parse the value of the
    element's <code>cols</code> attribute, if there is one.
    Let <var>cols</var> be the result, or an empty list if there is no such attribute.</p>

    <p>Use the <a id=frames-and-framesets:rules-for-parsing-a-list-of-dimensions-2 href=common-microsyntaxes.html#rules-for-parsing-a-list-of-dimensions>rules for parsing a list of dimensions</a> to parse the value of the
    element's <code>rows</code> attribute, if there is one.
    Let <var>rows</var> be the result, or an empty list if there is no such attribute.</p>
   <li>
    <p>For any of the entries in <var>cols</var> or <var>rows</var> that have the number zero and
    the unit <i>relative</i>, change the entry's number to one.</p>
   <li>
    <p>If <var>cols</var> has no entries, then add a single entry consisting of the value 1 and the
    unit <i>relative</i> to <var>cols</var>.</p>

    <p>If <var>rows</var> has no entries, then add a single entry consisting of the value 1 and the
    unit <i>relative</i> to <var>rows</var>.</p>
   <li>
    <p>Invoke the algorithm defined below to <a href=#convert-a-list-of-dimensions-to-a-list-of-pixel-values id=frames-and-framesets:convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of dimensions to a list of pixel
    values</a> using <var>cols</var> as the input list, and the width of the surface that the
    <code id=frames-and-framesets:frameset-2><a href=obsolete.html#frameset>frameset</a></code> is being rendered into, in <a href=https://drafts.csswg.org/css-values/#px id="frames-and-framesets:'px'" data-x-internal="'px'">CSS pixels</a>, as the
    input dimension. Let <var>sized cols</var> be the resulting list.</p>

    <p>Invoke the algorithm defined below to <a href=#convert-a-list-of-dimensions-to-a-list-of-pixel-values id=frames-and-framesets:convert-a-list-of-dimensions-to-a-list-of-pixel-values-2>convert a list of dimensions to a list of pixel
    values</a> using <var>rows</var> as the input list, and the height of the surface that the
    <code id=frames-and-framesets:frameset-3><a href=obsolete.html#frameset>frameset</a></code> is being rendered into, in <a href=https://drafts.csswg.org/css-values/#px id="frames-and-framesets:'px'-2" data-x-internal="'px'">CSS pixels</a>, as the
    input dimension. Let <var>sized rows</var> be the resulting list.</p>
   <li>
    <p>Split the surface into a grid of <var>w</var>×<var>h</var>
    rectangles, where <var>w</var> is the number of entries in <var>sized cols</var> and
    <var>h</var> is the number of entries in <var>sized rows</var>.</p>

    <p>Size the columns so that each column in the grid is as many <a href=https://drafts.csswg.org/css-values/#px id="frames-and-framesets:'px'-3" data-x-internal="'px'">CSS
    pixels</a> wide as the corresponding entry in the <var>sized cols</var> list.</p>

    <p>Size the rows so that each row in the grid is as many <a href=https://drafts.csswg.org/css-values/#px id="frames-and-framesets:'px'-4" data-x-internal="'px'">CSS pixels</a>
    high as the corresponding entry in the <var>sized rows</var> list.</p>
   <li>
    <p>Let <var>children</var> be the list of <code id=frames-and-framesets:frame><a href=obsolete.html#frame>frame</a></code> and <code id=frames-and-framesets:frameset-4><a href=obsolete.html#frameset>frameset</a></code> elements
    that are <a href=https://dom.spec.whatwg.org/#concept-tree-child id=frames-and-framesets:concept-tree-child data-x-internal=concept-tree-child>children</a> of the <code id=frames-and-framesets:frameset-5><a href=obsolete.html#frameset>frameset</a></code> element
    for which the algorithm was invoked.</p>
   <li>
    <p>For each row of the grid of rectangles created in the previous step, from top to bottom, run
    these substeps:</p>

    <ol><li>
      <p>For each rectangle in the row, from left to right, run these substeps:</p>

      <ol><li>
        <p>If there are any elements left in <var>children</var>, take the first element in the
        list, and assign it to the rectangle.</p>

        <p>If this is a <code id=frames-and-framesets:frameset-6><a href=obsolete.html#frameset>frameset</a></code> element, then recurse the entire <code id=frames-and-framesets:frameset-7><a href=obsolete.html#frameset>frameset</a></code>
        layout algorithm for that <code id=frames-and-framesets:frameset-8><a href=obsolete.html#frameset>frameset</a></code> element, with the rectangle as the
        surface.</p>

        <p>Otherwise, it is a <code id=frames-and-framesets:frame-2><a href=obsolete.html#frame>frame</a></code> element; render its <a id=frames-and-framesets:content-navigable href=document-sequences.html#content-navigable>content
        navigable</a>, positioned and sized to fit the rectangle.</p>
       <li>
        <p>If there are any elements left in <var>children</var>, remove the first element from
        <var>children</var>.</p>
       </ol>
     </ol>
   <li>
    <p>If the <code id=frames-and-framesets:frameset-9><a href=obsolete.html#frameset>frameset</a></code> element <a href=#has-a-border id=frames-and-framesets:has-a-border>has a border</a>, draw an outer set of borders
    around the rectangles, using the element's <a href=#frame-border-colour id=frames-and-framesets:frame-border-colour>frame border color</a>.</p>

    <p>For each rectangle, if there is an element assigned to that rectangle, and that element
    <a href=#has-a-border id=frames-and-framesets:has-a-border-2>has a border</a>, draw an inner set of borders around that rectangle, using the
    element's <a href=#frame-border-colour id=frames-and-framesets:frame-border-colour-2>frame border color</a>.</p>

    <p>For each (visible) border that does not abut a rectangle that is assigned a
    <code id=frames-and-framesets:frame-3><a href=obsolete.html#frame>frame</a></code> element with a <code>noresize</code>
    attribute (including rectangles in further nested <code id=frames-and-framesets:frameset-10><a href=obsolete.html#frameset>frameset</a></code> elements), the user
    agent is expected to allow the user to move the border, resizing the rectangles within, keeping
    the proportions of any nested <code id=frames-and-framesets:frameset-11><a href=obsolete.html#frameset>frameset</a></code> grids.</p>

    <p>A <code id=frames-and-framesets:frameset-12><a href=obsolete.html#frameset>frameset</a></code> or <code id=frames-and-framesets:frame-4><a href=obsolete.html#frame>frame</a></code> element <dfn id=has-a-border>has a border</dfn> if the
    following algorithm returns true:</p>

    <ol><li><p>If the element has a <code>frameborder</code> attribute whose value is not the
     empty string and whose first character is either a U+0031 DIGIT ONE (1) character, a U+0079
     LATIN SMALL LETTER Y character (y), or a U+0059 LATIN CAPITAL LETTER Y character (Y), then
     return true.<li><p>Otherwise, if the element has a <code>frameborder</code> attribute, return
     false.<li><p>Otherwise, if the element has a parent element that is a <code id=frames-and-framesets:frameset-13><a href=obsolete.html#frameset>frameset</a></code> element,
     then return true if <em>that</em> element <a href=#has-a-border id=frames-and-framesets:has-a-border-3>has a border</a>, and false if it does
     not.<li><p>Otherwise, return true.</ol>

    <p>The <dfn id=frame-border-colour>frame border color</dfn> of a
    <code id=frames-and-framesets:frameset-14><a href=obsolete.html#frameset>frameset</a></code> or <code id=frames-and-framesets:frame-5><a href=obsolete.html#frame>frame</a></code> element is the color obtained from the following
    algorithm:</p>

    <ol><li><p>If the element has a <code>bordercolor</code> attribute, and applying the
     <a id=frames-and-framesets:rules-for-parsing-a-legacy-colour-value href=common-microsyntaxes.html#rules-for-parsing-a-legacy-colour-value>rules for parsing a legacy color value</a> to that attribute's value does not return
     failure, then return the color so obtained.<li><p>Otherwise, if the element has a parent element that is a <code id=frames-and-framesets:frameset-15><a href=obsolete.html#frameset>frameset</a></code> element,
     then return the <a href=#frame-border-colour id=frames-and-framesets:frame-border-colour-3>frame border color</a> of that element.</p>

     <li><p>Otherwise, return gray.</ol>
   </ol>

  <p>The algorithm to <dfn id=convert-a-list-of-dimensions-to-a-list-of-pixel-values>convert a list of dimensions to a list of pixel values</dfn> consists of
  the following steps:</p>

  <ol><li>
    <p>Let <var>input list</var> be the list of numbers and units passed to the algorithm.</p>

    <p>Let <var>output list</var> be a list of numbers the same length as <var>input list</var>, all
    zero.</p>

    <p>Entries in <var>output list</var> correspond to the entries in <var>input list</var> that
    have the same position.</p>
   <li><p>Let <var>input dimension</var> be the size passed to the algorithm.</p>

   <li>
    <p>Let <var>total percentage</var> be the sum of all the numbers in <var>input list</var> whose
    unit is <i>percentage</i>.</p>

    <p>Let <var>total relative</var> be the sum of all the numbers in <var>input list</var> whose
    unit is <i>relative</i>.</p>

    <p>Let <var>total absolute</var> be the sum of all the numbers in <var>input list</var> whose
    unit is <i>absolute</i>.</p>

    <p>Let <var>remaining space</var> be the value of <var>input dimension</var>.</p>
   <li>
    <p>If <var>total absolute</var> is greater than <var>remaining space</var>, then for each entry
    in <var>input list</var> whose unit is <i>absolute</i>, set the corresponding value in
    <var>output list</var> to the number of the entry in <var>input list</var> multiplied by
    <var>remaining space</var> and divided by <var>total absolute</var>. Then, set <var>remaining
    space</var> to zero.</p>

    <p>Otherwise, for each entry in <var>input list</var> whose unit is <i>absolute</i>, set the
    corresponding value in <var>output list</var> to the number of the entry in <var>input
    list</var>. Then, decrement <var>remaining space</var> by <var>total absolute</var>.</p>
   <li>
    <p>If <var>total percentage</var> multiplied by the <var>input dimension</var> and divided by
    100 is greater than <var>remaining space</var>, then for each entry in <var>input list</var>
    whose unit is <i>percentage</i>, set the corresponding value in <var>output list</var> to the
    number of the entry in <var>input list</var> multiplied by <var>remaining space</var> and
    divided by <var>total percentage</var>. Then, set <var>remaining space</var> to zero.</p>

    <p>Otherwise, for each entry in <var>input list</var> whose unit is <i>percentage</i>, set the
    corresponding value in <var>output list</var> to the number of the entry in <var>input
    list</var> multiplied by the <var>input dimension</var> and divided by 100. Then, decrement
    <var>remaining space</var> by <var>total percentage</var> multiplied by the <var>input
    dimension</var> and divided by 100.</p>
   <li>
    <p>For each entry in <var>input list</var> whose unit is <i>relative</i>, set the corresponding
    value in <var>output list</var> to the number of the entry in <var>input list</var> multiplied
    by <var>remaining space</var> and divided by <var>total relative</var>.</p>
   <li><p>Return <var>output list</var>.</ol>

  <p>User agents working with integer values for frame widths (as opposed to user agents that can
  lay frames out with subpixel accuracy) are expected to distribute the remainder first to the last
  entry whose unit is <i>relative</i>, then equally (not proportionally) to each entry whose unit is
  <i>percentage</i>, then equally (not proportionally) to each entry whose unit is <i>absolute</i>,
  and finally, failing all else, to the last entry.</p>

  <hr>



  <p>The contents of a <code id=frames-and-framesets:frame-6><a href=obsolete.html#frame>frame</a></code> element that does not have a <code id=frames-and-framesets:frameset-16><a href=obsolete.html#frameset>frameset</a></code> parent
  are expected to be rendered as <a id=frames-and-framesets:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a>; the user agent is expected to not
  render its <a id=frames-and-framesets:content-navigable-2 href=document-sequences.html#content-navigable>content navigable</a> in this case, and its <a id=frames-and-framesets:content-navigable-3 href=document-sequences.html#content-navigable>content navigable</a> is
  expected to have a <a id=frames-and-framesets:viewport-2 href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a> with zero width and zero height.</p>

  


  

  <h3 id=interactive-media><span class=secno>15.7</span> Interactive media<a href=#interactive-media class=self-link></a></h3>

  <h4 id=links,-forms,-and-navigation><span class=secno>15.7.1</span> Links, forms, and navigation<a href=#links,-forms,-and-navigation class=self-link></a></h4>

  <p>User agents are expected to allow the user to control aspects of <a id=links,-forms,-and-navigation:hyperlink href=links.html#hyperlink>hyperlink</a>
  activation and <a id=links,-forms,-and-navigation:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>, such as which <a id=links,-forms,-and-navigation:navigable href=document-sequences.html#navigable>navigable</a> is to be used
  for the subsequent <a href=browsing-the-web.html#navigate id=links,-forms,-and-navigation:navigate>navigation</a>.</p>

  <p>User agents are expected to allow users to discover the destination of <a href=links.html#hyperlink id=links,-forms,-and-navigation:hyperlink-2>hyperlinks</a> and of <a href=forms.html#the-form-element id=links,-forms,-and-navigation:the-form-element>forms</a> before triggering their
  <a href=browsing-the-web.html#navigate id=links,-forms,-and-navigation:navigate-2>navigation</a>.</p>

  <p>User agents are expected to inform the user of whether a <a id=links,-forms,-and-navigation:hyperlink-3 href=links.html#hyperlink>hyperlink</a> includes
  <a id=links,-forms,-and-navigation:hyperlink-auditing href=links.html#hyperlink-auditing>hyperlink auditing</a>, and to let them know at a minimum which domains will be contacted
  as part of such auditing.</p>

  <p>User agents may allow users to <a id=links,-forms,-and-navigation:navigate-3 href=browsing-the-web.html#navigate>navigate</a> <a href=document-sequences.html#navigable id=links,-forms,-and-navigation:navigable-2>navigables</a> to the URLs <a href=urls-and-fetching.html#encoding-parsing-a-url id=links,-forms,-and-navigation:encoding-parsing-a-url>indicated</a> by the <code>cite</code> attributes on <code id=links,-forms,-and-navigation:the-q-element><a href=text-level-semantics.html#the-q-element>q</a></code>,
  <code id=links,-forms,-and-navigation:the-blockquote-element><a href=grouping-content.html#the-blockquote-element>blockquote</a></code>, <code id=links,-forms,-and-navigation:the-ins-element><a href=edits.html#the-ins-element>ins</a></code>, and <code id=links,-forms,-and-navigation:the-del-element><a href=edits.html#the-del-element>del</a></code> elements.</p>

  <p>User agents may surface <a href=links.html#hyperlink id=links,-forms,-and-navigation:hyperlink-4>hyperlinks</a> created by <code id=links,-forms,-and-navigation:the-link-element><a href=semantics.html#the-link-element>link</a></code>
  elements in their user interface, as discussed <a href=semantics.html#providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element>previously</a>.</p>




  <h4 id=the-title-attribute-2><span class=secno>15.7.2</span> The <code id=the-title-attribute-2:attr-title><a href=dom.html#attr-title>title</a></code> attribute<a href=#the-title-attribute-2 class=self-link></a></h4>

  <p>User agents are expected to expose the <a id=the-title-attribute-2:advisory-information href=dom.html#advisory-information>advisory information</a> of elements upon user
  request, and to make the user aware of the presence of such information.</p>

  <p>On interactive graphical systems where the user can use a pointing device, this could take the
  form of a tooltip. When the user is unable to use a pointing device, then the user agent is
  expected to make the content available in some other fashion, e.g. by making the element a
  <a id=the-title-attribute-2:focusable-area href=interaction.html#focusable-area>focusable area</a> and always displaying the <a id=the-title-attribute-2:advisory-information-2 href=dom.html#advisory-information>advisory information</a> of the
  currently <a id=the-title-attribute-2:focused href=interaction.html#focused>focused</a> element, or by showing the <a id=the-title-attribute-2:advisory-information-3 href=dom.html#advisory-information>advisory information</a> of the
  elements under the user's finger on a touch device as the user pans around the screen.</p>

  <p>U+000A LINE FEED (LF) characters are expected to cause line breaks in the tooltip; U+0009
  CHARACTER TABULATION (tab) characters are expected to render as a nonzero horizontal shift that
  lines up the next glyph with the next tab stop, with tab stops occurring at points that are
  multiples of 8 times the width of a U+0020 SPACE character.</p>

  <div class=example>

   <p>For example, a visual user agent could make elements with a <code id=the-title-attribute-2:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute <a id=the-title-attribute-2:focusable href=interaction.html#focusable>focusable</a>, and could make
   any <a id=the-title-attribute-2:focused-2 href=interaction.html#focused>focused</a> element with a <code id=the-title-attribute-2:attr-title-3><a href=dom.html#attr-title>title</a></code> attribute
   show its tooltip under the element while the element has focus. This would allow a user to tab
   around the document to find all the advisory text.</p>

  </div>

  <div class=example>

   <p>As another example, a screen reader could provide an audio cue when reading an element with a
   tooltip, with an associated key to read the last tooltip for which a cue was played.</p>

  </div>


  <h4 id=editing-hosts><span class=secno>15.7.3</span> Editing hosts<a href=#editing-hosts class=self-link></a></h4>

  <p>The current text editing caret (i.e. the <a id=editing-hosts:active-range href=https://w3c.github.io/editing/docs/execCommand/#active-range data-x-internal=active-range>active range</a>, if it is empty and in an
  <a id=editing-hosts:editing-host href=interaction.html#editing-host>editing host</a>), if any, is expected to act like an inline
  <a id=editing-hosts:replaced-element href=https://drafts.csswg.org/css-display/#replaced-element data-x-internal=replaced-element>replaced element</a> with the vertical dimensions of the caret and with zero width for
  the purposes of the CSS rendering model.</p>

  <p class=note>This means that even an empty block can have the caret inside it, and that when
  the caret is in such an element, it prevents <a href=https://drafts.csswg.org/css2/#collapsing-margins id=editing-hosts:collapsing-margins data-x-internal=collapsing-margins>margins from
  collapsing</a> through the element.</p>



  <h4 id=text-rendered-in-native-user-interfaces><span class=secno>15.7.4</span> Text rendered in native user interfaces<a href=#text-rendered-in-native-user-interfaces class=self-link></a></h4>

  <p>User agents are expected to honor the Unicode semantics of text that is exposed in user
  interfaces, for example supporting the bidirectional algorithm in text shown in dialogs, title
  bars, popup menus, and tooltips. Text from the contents of elements is expected to be rendered in
  a manner that honors <a id=text-rendered-in-native-user-interfaces:the-directionality href=dom.html#the-directionality>the directionality</a> of the element from which the text was
  obtained. Text from attributes is expected to be rendered in a manner that honours the
  <a id=text-rendered-in-native-user-interfaces:directionality-of-the-attribute href=dom.html#directionality-of-the-attribute>directionality of the attribute</a>.</p>

  <div class=example>

   <p>Consider the following markup, which has Hebrew text asking for a programming language, the
   languages being text for which a left-to-right direction is important given the punctuation in
   some of their names:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-> <c- e>dir</c-><c- o>=</c-><c- s>&quot;rtl&quot;</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;he&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  <span dir='rtl' lang='he'>בחר שפת תכנות:</span>
  <c- p>&lt;</c-><c- f>select</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>dir</c-><c- o>=</c-><c- s>&quot;ltr&quot;</c-><c- p>&gt;</c->C++<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>dir</c-><c- o>=</c-><c- s>&quot;ltr&quot;</c-><c- p>&gt;</c->C#<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>dir</c-><c- o>=</c-><c- s>&quot;ltr&quot;</c-><c- p>&gt;</c->FreePascal<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>dir</c-><c- o>=</c-><c- s>&quot;ltr&quot;</c-><c- p>&gt;</c->F#<c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>If the <code id=text-rendered-in-native-user-interfaces:the-select-element><a href=form-elements.html#the-select-element>select</a></code> element was rendered as a drop down box, a correct rendering would
   ensure that the punctuation was the same both in the drop down, and in the box showing the
   current selection.</p>

   <p><img src=../images/bidiselect.png width=206 alt="" height=105></p> 

  </div>

  <div class=example>

   <p>The directionality of attributes depends on the attribute and on the element's <code id=text-rendered-in-native-user-interfaces:attr-dir><a href=dom.html#attr-dir>dir</a></code> attribute, as the following example demonstrates. Consider this
   markup:</p>

   <pre><code class='html'><bdo dir='ltr'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>th</c-> <c- e>abbr</c-><c- o>=</c-><c- s>&quot;(א&quot;</c-> <c- e>dir</c-><c- o>=</c-><c- s>ltr</c-><c- p>&gt;</c->A
  <c- p>&lt;</c-><c- f>th</c-> <c- e>abbr</c-><c- o>=</c-><c- s>&quot;(א&quot;</c-> <c- e>dir</c-><c- o>=</c-><c- s>rtl</c-><c- p>&gt;</c->A
  <c- p>&lt;</c-><c- f>th</c-> <c- e>abbr</c-><c- o>=</c-><c- s>&quot;(א&quot;</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-><c- p>&gt;</c->A
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></bdo></code></pre>

   <p>If the <code id=text-rendered-in-native-user-interfaces:attr-th-abbr><a href=tables.html#attr-th-abbr>abbr</a></code> attributes are rendered, e.g. in a tooltip or
   other user interface, the first will have a left parenthesis (because the direction is 'ltr'),
   the second will have a right parenthesis (because the direction is 'rtl'), and the third will
   have a right parenthesis (because the direction is determined <em>from the attribute value</em>
   to be 'rtl').</p>

   <p>However, if instead the attribute was not a <a id=text-rendered-in-native-user-interfaces:directionality-capable-attribute href=dom.html#directionality-capable-attribute>directionality-capable attribute</a>, the
   results would be different:</p>

   <pre><code class='html'><bdo dir='ltr'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>th</c-> <c- e>data-abbr</c-><c- o>=</c-><c- s>&quot;(א&quot;</c-> <c- e>dir</c-><c- o>=</c-><c- s>ltr</c-><c- p>&gt;</c->A
  <c- p>&lt;</c-><c- f>th</c-> <c- e>data-abbr</c-><c- o>=</c-><c- s>&quot;(א&quot;</c-> <c- e>dir</c-><c- o>=</c-><c- s>rtl</c-><c- p>&gt;</c->A
  <c- p>&lt;</c-><c- f>th</c-> <c- e>data-abbr</c-><c- o>=</c-><c- s>&quot;(א&quot;</c-> <c- e>dir</c-><c- o>=</c-><c- s>auto</c-><c- p>&gt;</c->A
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c-></bdo></code></pre>

   <p>In this case, if the user agent were to expose the <code>data-abbr</code> attribute
   in the user interface (e.g. in a debugging environment), the last case would be rendered with a
   <em>left</em> parenthesis, because the direction would be determined from the element's
   contents.</p>

  </div>

  <p>A string provided by a script (e.g. the argument to <code id=text-rendered-in-native-user-interfaces:dom-alert><a href=timers-and-user-prompts.html#dom-alert>window.alert()</a></code>) is expected to be treated as an independent set of one or
  more bidirectional algorithm paragraphs when displayed, as defined by the bidirectional algorithm,
  including, for instance, supporting the paragraph-breaking behavior of U+000A LINE FEED (LF)
  characters. For the purposes of determining the paragraph level of such text in the bidirectional
  algorithm, this specification does <em>not</em> provide a higher-level override of rules P2 and
  P3. <a href=references.html#refsBIDI>[BIDI]</a></p>

  <p>When necessary, authors can enforce a particular direction for a given paragraph by starting it
  with the Unicode U+200E LEFT-TO-RIGHT MARK or U+200F RIGHT-TO-LEFT MARK characters.</p>

  <div class=example>

   <p>Thus, the following script:</p>

   <pre><code class='js'>alert<c- p>(</c-><c- t>&apos;\u05DC\u05DE\u05D3 HTML \u05D4\u05D9\u05D5\u05DD!&apos;</c-><c- p>)</c-></code></pre>

   <p>...would always result in a message reading
        "<bdo dir=rtl lang="">למד LMTH היום!</bdo>"
   (not "<bdo dir=ltr lang="">דמל HTML םויה!</bdo>"),
   regardless of the language of the user agent interface or the
   direction of the page or any of its elements.</p>

  </div>

  <div class=example>

   <p>For a more complex example, consider the following script:</p>

   <pre class=bad><code class='js'><c- d>/* Warning: this script does not handle right-to-left scripts correctly */</c->
<c- a>var</c-> s<c- p>;</c->
<c- k>if</c-> <c- p>(</c->s <c- o>=</c-> prompt<c- p>(</c-><c- t>&apos;What is your name?&apos;</c-><c- p>))</c-> <c- p>{</c->
  alert<c- p>(</c->s <c- o>+</c-> <c- t>&apos;! Ok, Fred, &apos;</c-> <c- o>+</c-> s <c- o>+</c-> <c- t>&apos;, and Wilma will get the car.&apos;</c-><c- p>);</c->
<c- p>}</c-></code></pre>

   <p>When the user enters "<kbd>Kitty</kbd>", the user agent would alert "<samp>Kitty! Ok, Fred,
   Kitty, and Wilma will get the car.</samp>". However, if the user enters "<kbd dir=rtl lang=ar>لا أفهم</kbd>", then the bidirectional
   algorithm will determine that the direction of the paragraph is right-to-left, and so the output
   will be the following unintended mess: "<samp lang=""><bdo dir=rtl>لا أفهم! derF ,kO, لا أفهم, rac eht teg lliw amliW dna.</bdo></samp>"</p>

   <p>To force an alert that starts with user-provided text (or other text of unknown
   directionality) to render left-to-right, the string can be prefixed with a U+200E LEFT-TO-RIGHT
   MARK character:</p>

   <pre><code class='js'><c- a>var</c-> s<c- p>;</c->
<c- k>if</c-> <c- p>(</c->s <c- o>=</c-> prompt<c- p>(</c-><c- t>&apos;What is your name?&apos;</c-><c- p>))</c-> <c- p>{</c->
  alert<c- p>(</c-><c- t>&apos;</c-><strong><c- t>\u200E</c-></strong><c- t>&apos;</c-> <c- o>+</c-> s <c- o>+</c-> <c- t>&apos;! Ok, Fred, &apos;</c-> <c- o>+</c-> s <c- o>+</c-> <c- t>&apos;, and Wilma will get the car.&apos;</c-><c- p>);</c->
<c- p>}</c-></code></pre>

  </div>



  <h3 id=print-media><span class=secno>15.8</span> Print media<a href=#print-media class=self-link></a></h3>

  <p>User agents are expected to allow the user to request the opportunity to <dfn id=obtain-a-physical-form>obtain a physical
  form</dfn> (or a representation of a physical form) of a <code id=print-media:document><a href=dom.html#document>Document</a></code>. For example,
  selecting the option to print a page or convert it to PDF format. <a href=references.html#refsPDF>[PDF]</a></p>

  <p>When the user actually <a href=#obtain-a-physical-form id=print-media:obtain-a-physical-form>obtains a physical form</a> (or
  a representation of a physical form) of a <code id=print-media:document-2><a href=dom.html#document>Document</a></code>, the user agent is expected to
  create a new rendering of the <code id=print-media:document-3><a href=dom.html#document>Document</a></code> for the print media.</p>



  <h3 id=unstyled-xml-documents><span class=secno>15.9</span> Unstyled XML documents<a href=#unstyled-xml-documents class=self-link></a></h3>

  

  <p>HTML user agents may, in certain circumstances, find themselves rendering non-HTML documents
  that use vocabularies for which they lack any built-in knowledge. This section provides for a way
  for user agents to handle such documents in a somewhat useful manner.</p>

  <p>While a <code id=unstyled-xml-documents:document><a href=dom.html#document>Document</a></code> is an <a href=#unstyled-document id=unstyled-xml-documents:unstyled-document>unstyled document</a>, the user agent is expected
  to render <a href=#an-unstyled-document-view id=unstyled-xml-documents:an-unstyled-document-view>an unstyled document view</a>.</p>

  <p>A <code id=unstyled-xml-documents:document-2><a href=dom.html#document>Document</a></code> is an <dfn id=unstyled-document>unstyled document</dfn> while it matches the following
  conditions:</p>

  <ul><li>The <code id=unstyled-xml-documents:document-3><a href=dom.html#document>Document</a></code> has no author style sheets (whether referenced by HTTP headers, processing instructions, elements like <code id=unstyled-xml-documents:the-link-element><a href=semantics.html#the-link-element>link</a></code>, inline elements like <code id=unstyled-xml-documents:the-style-element><a href=semantics.html#the-style-element>style</a></code>, or any other mechanism).
   <li>None of the elements in the <code id=unstyled-xml-documents:document-4><a href=dom.html#document>Document</a></code> have any <a href=#presentational-hints id=unstyled-xml-documents:presentational-hints>presentational hints</a>.
   <li>None of the elements in the <code id=unstyled-xml-documents:document-5><a href=dom.html#document>Document</a></code> have any <a href=https://drafts.csswg.org/css-style-attr/#style-attribute id=unstyled-xml-documents:css-styling-attribute data-x-internal=css-styling-attribute>style attributes</a>.
   <li>None of the elements in the <code id=unstyled-xml-documents:document-6><a href=dom.html#document>Document</a></code> are in any of the following namespaces: <a id=unstyled-xml-documents:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a>, <a id=unstyled-xml-documents:svg-namespace href=https://infra.spec.whatwg.org/#svg-namespace data-x-internal=svg-namespace>SVG namespace</a>, <a id=unstyled-xml-documents:mathml-namespace href=https://infra.spec.whatwg.org/#mathml-namespace data-x-internal=mathml-namespace>MathML namespace</a>
   <li>The <code id=unstyled-xml-documents:document-7><a href=dom.html#document>Document</a></code> has no <a id=unstyled-xml-documents:focusable-area href=interaction.html#focusable-area>focusable area</a> (e.g. from XLink) other than the <a id=unstyled-xml-documents:viewport href=https://drafts.csswg.org/css2/#viewport data-x-internal=viewport>viewport</a>.
   <li>The <code id=unstyled-xml-documents:document-8><a href=dom.html#document>Document</a></code> has no <a href=links.html#hyperlink id=unstyled-xml-documents:hyperlink>hyperlinks</a> (e.g. from XLink).
   <li>There exists no <a href=webappapis.html#concept-script id=unstyled-xml-documents:concept-script>script</a> whose <a href=webappapis.html#settings-object id=unstyled-xml-documents:settings-object>settings object</a>'s <a href=webappapis.html#concept-settings-object-global id=unstyled-xml-documents:concept-settings-object-global>global object</a> is a <code id=unstyled-xml-documents:window><a href=nav-history-apis.html#window>Window</a></code> object with
   this <code id=unstyled-xml-documents:document-9><a href=dom.html#document>Document</a></code> as its <a href=nav-history-apis.html#concept-document-window id=unstyled-xml-documents:concept-document-window>associated
   <code>Document</code></a>.
   <li>None of the elements in the <code id=unstyled-xml-documents:document-10><a href=dom.html#document>Document</a></code> have any registered event listeners.
  </ul>

  <p><dfn id=an-unstyled-document-view>An unstyled document view</dfn> is one where the DOM is not rendered according to CSS
  (which would, since there are no applicable styles in this context, just result in a wall of
  text), but is instead rendered in a manner that is useful for a developer. This could consist of
  just showing the <code id=unstyled-xml-documents:document-11><a href=dom.html#document>Document</a></code> object's source, maybe with syntax highlighting, or it
  could consist of displaying just the DOM tree, or simply a message saying that the page is not a
  styled document.</p>

  <p class=note>If a <code id=unstyled-xml-documents:document-12><a href=dom.html#document>Document</a></code> stops being an <a href=#unstyled-document id=unstyled-xml-documents:unstyled-document-2>unstyled document</a>, then the
  conditions above stop applying, and thus a user agent following these requirements will switch to
  using the regular CSS rendering.</p>

  




  <nav><a href=xhtml.html>← 14 The XML syntax</a> — <a href=index.html>Table of Contents</a> — <a href=obsolete.html>16 Obsolete features →</a></nav>
